Блог

Главная - Вопросы по программированию - Панель вкладок Boostrap работает только один раз

Панель вкладок Boostrap работает только один раз

#twitter-bootstrap

#twitter-bootstrap

Вопрос:

я использую панель вкладок с bootstrap framework. Работает нормально… при первом нажатии на ссылку. После этого содержимое панели не меняется, и класс ‘active’ не добавляется к соответствующему элементу

вот мой код:

 <nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: #000;">	
 <div class="container"> 
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-left">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li>
      <div class="dropup" id="menu">
        <button class="btn dropdown-toggle" type="button"             data-toggle="dropdown" style="padding-top: 15px;             padding-bottom: 15px; background-color: #000;               color:#fff; border: none;font-family:               Montserrat;">HOME
          <span class="caret"></span>
       </button>
	    <ul class="dropdown-menu nav nav-tabs">
          <li><a href="#origine" data-toggle="tab" role="tab">Notre origine</a></li>
          <li><a href="#volonte" data-toggle="tab" role="tab">Notre volonté</a></li>
          <li><a href="#website" data-toggle="tab" role="tab">Notre site</a></li>
          <li><a href="#securite" data-toggle="tab" role="tab">Notre sécurité</a></li>						      
          <li><a href="#groupe" data-toggle="tab" role="tab">Notre groupe</a></li>						      
          <li><a href="#realisations" data-toggle="tab" role="tab">Nos réalisations</a></li>
							      
        </ul>
      </div>
    </li>
    <li>
      <a class="page-scroll" href="#connexion" style="color:#fff;" data-toggle="modal" data-target="#connexion">Connexion</a>
     </li>
	  <li>
	    <a class="page-scroll" href="#portfolio" style="color:#fff;">Actualités</a>
	  </li>
	  <li>
	     <a class="page-scroll" href="#contact" style="color:#fff;" data-toggle="modal" data-target="#contact">Contact</a>
	    </li>
	  </ul>
	</div>
  </div>
</nav>
  <div class="tab-content navbar-fixed-bottom" style="background-color:#000; color:#fff;opacity:0.8; width: 60%; margin: auto; bottom:20%;">
	<div id="origine" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		  <h2>Notre origine</h2>
				ertyrtyty
	</div>
	<div id="volonte" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		  <h2>Notre volonté</h2>				
				dfghdfghdfghgh
	</div>
	<div id="website" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
				<h2>Notre site</h2>
				dfghgfhdgfh
	</div>
	<div id="securite" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Notre sécurité</h2>
				securite
	</div>
	<div id="groupe" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Nos valeurs ajoutées</h2>				.
				gfdhfghfgh
	</div>
	<div id="realisations" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Nos réalisations</h2>
				realsiations
	</div>
  </div>

Я искал тему, но не нашел никакого решения

Ответ №1:

Хорошо, я нашел решение Я заметил, что класс ‘active’ был добавлен к элементам li из выпадающего меню при нажатии на их дочерний элемент a и не был удален после нажатия на другой элемент a из этого меню

итак, я добавил этот код: 

 $('#menu a').click(function (e) {
   e.preventDefault();
   $(this).parent().removeClass('active');
});

Сейчас все работает нормально

Комментарии:

1. Вы не использовали версию 4 (alpha), не так ли?

2. почему я должен удалять активный класс вручную, когда я использую одну из функций bootstap?

3. Я имею в виду, почему bootstrap не удалил ее сам

Ответ №2:

У меня была такая же проблема с Bootstrap 4 alpha. Я обнаружил, что это потому, что я не добавил некоторые классы к элементам привязки и списка.

Структура должна быть такой:

  <ul class="nav nav-tabs">
     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#panel1">Panel1</a></li>
     <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#panel2">Panel2</a></li>
  </ul>