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

Question

Я использую панель вкладок с каркасом бутстрапа. Он отлично работает ... в первый раз, когда я нажимаю ссылку. После этого «изменений, и класс„Контент панели Doesnt активный“не добавляются к соответствующему элементу

здесь мой кода:

<nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: #000;"> \t 
 
<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> 
 
\t  <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> \t \t \t \t \t \t  
 
      <li><a href="#groupe" data-toggle="tab" role="tab">Notre groupe</a></li> \t \t \t \t \t \t  
 
      <li><a href="#realisations" data-toggle="tab" role="tab">Nos réalisations</a></li> 
 
\t \t \t \t \t \t \t  
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a class="page-scroll" href="#connexion" style="color:#fff;" data-toggle="modal" data-target="#connexion">Connexion</a> 
 
    </li> 
 
\t <li> 
 
\t  <a class="page-scroll" href="#portfolio" style="color:#fff;">Actualités</a> 
 
\t </li> 
 
\t <li> 
 
\t  <a class="page-scroll" href="#contact" style="color:#fff;" data-toggle="modal" data-target="#contact">Contact</a> 
 
\t  </li> 
 
\t </ul> 
 
\t </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%;"> 
 
\t <div id="origine" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t <h2>Notre origine</h2> 
 
\t \t \t \t ertyrtyty 
 
\t </div> 
 
\t <div id="volonte" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t <h2>Notre volonté</h2> \t \t \t \t 
 
\t \t \t \t dfghdfghdfghgh 
 
\t </div> 
 
\t <div id="website" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t \t \t <h2>Notre site</h2> 
 
\t \t \t \t dfghgfhdgfh 
 
\t </div> 
 
\t <div id="securite" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t <h2>Notre sécurité</h2> 
 
\t \t \t \t securite 
 
\t </div> 
 
\t <div id="groupe" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t <h2>Nos valeurs ajoutées</h2> \t \t \t \t . 
 
\t \t \t \t gfdhfghfgh 
 
\t </div> 
 
\t <div id="realisations" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;"> 
 
\t \t <h2>Nos réalisations</h2> 
 
\t \t \t \t realsiations 
 
\t </div> 
 
    </div>

Я обыскать subject, но не нашел решения

Answer 1

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

поэтому я добавил этот код:

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

Это работает отлично теперь

Answer 2

I имел ту же проблему с 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>