Как сделать в Bootstrapе вкладки так, чтобы они открывались и закрывались по нажатию?

Я не особо дружу со скриптами по этому решил спросить у вас уважаемые)

Как все будет работать проще показать на примере
881fbf4cb4abe126b0b9b36ce2f07e5e102598f3
код идентичен бутстрапу getbootstrap.com/javascript/#tabs

и вот сам код
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
   <li>
      <a href="#home" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt=" ">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
   <li>
      <a href="#profile" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt="...">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
   <li>
      <a href="#messages" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt="...">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
   <div class="tab-pane  fade " id="home">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
   <div class="tab-pane fade" id="profile">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
   <div class="tab-pane fade" id="messages">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
</div>


По началу все вкладки будут закрыты, при нажатие на любую из вкладок она выползает, но если на нее нажать еще раз она закроется, ну и + нужно оставить функцию которая при нажатии на другую вкладку закрывает предыдущую.
надеюсь что все объяснил нормально)
  • Вопрос задан
  • 2569 просмотров
Решения вопроса 1
KorsaR-ZN
@KorsaR-ZN
Там кода на пол страницу, и какой именно взяли Вы и как его используете, мы знать не можем.
Так что пожалуйста предоставьте кусок реальный из вашего проекта, чтобы можно было локализовать проблему и помочь Вам, иначе ни как...

UPD
Добавьте следующий код на страницу

<script type="text/javascript">
$(document).ready(function()
{
	$('#contactTab a').click(function()
	{
		var that = $(this),
		    parent = that.parent();
			
		$('#contactTab a span.text').text('Подробнее');
	
		if(parent.is('.active'))
		{
			$(that.attr('href')).removeClass('active').addClass('fade');
			that.parent().removeClass('active');
		}
		else
		{
			that.find('span.text').text('Закрыть');
			that.tab('show');
		}
	
		return false;
	
	});
});
</script>

A у элемента <ul class="nav nav-tabs" role="tablist">,
добавьте туда id="contactTab"

А слова "подробнее" обернуть так:
<span class="text">Подробнее</span>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Я так понимаю речь идет о вкладках которые под картинкой, так вот, все работает отлично и скачивается все тоже отлично. Может я не там смотрю?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы