ブーストラップタブパネルは一度しか動作しません

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>

私が検索してきました件名は見つかりましたが、解決策が見つかりません

Answer 1

Ok、私には解決策が見つかりました clのドロップダウンメニューからli要素に 'active'というクラスが追加されていることに気付きました自分の子供に嫌とは別で、このメニュー

から要素をクリックした後に削除されなかったので、私はこのコードを追加：

$('#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>