ブートストラップ4コンテンツがダッシュボードで正しく動作していないタブ

Question

ブートストラップのダッシュボードテンプレートを使用して単純なページを作成したいと考えていますが、現在、ボディ内に異なるコンテンツペインを持つナビゲーションバーのタブを実装しています。

全体的に2つのペインで動作しますが、最初のペインから2番目のペインに戻って最初のペインに戻ったときに、両方のタブの内容が表示されます。もう一度切り替えると、正しく動作します（ただし、最初のタブのリスト要素はアクティブに設定されていません）。

正常に動作していないjsfiddleを作成しましたが、hunzaboys codepenが正常に動作し、問題が示されています。

ここで私のエラー切り替え時に両方のタブの内容が表示されるのはなぜですか？

EDIT：問題は、能動素子がNAVない場合であっても（特にタブ内の二つの「アクティブ」クラスを持つことが問題を引き起こしているようだ、タブの中にネストされた別のナビゲーションバーを争う持っていたよう

はそうアイテムなど）。

私は新しい例を作った：https://codepen.io/anon/pen/KXMoRV

あなたは再び「Überblick」に「Einstellungen」にトップナビゲーションバーに切り替えるとした場合、あなたが同時にアクティブの両方のコンテンツペインが表示されます。

ページをリロードして45行目のボタンから「アクティブ」クラスを削除した場合、これは起こりません。

    <button class="btn btn-primary active" type="button">Test</button> 

誰でもお手伝いできますか？

ありがとうございました！

Answer 1

は、自分でこれを解決しました。

トップナビゲーションバーと各コンテンツペインのブートストラップからnav関数を使用する代わりに、コンテンツペインでブートストラップナビのみを使用し、現在はトップナビゲーションバーを手動で制御しています。

私は、現在の状態と予想される動作を示しcodepenをした：ここでは

https://codepen.io/anon/pen/KXWvLV

は、手動でdivを制御し、NAVの挙動をシミュレートするためのコードです：

$("#link-overview").on("click", function() { 
    console.log("[INFO] Showing overview"); 
    $("#pane-overview").show(); 
    $("#pane-settings").hide(); 
    } 
}); 

$("#link-settings").on("click", function() { 
    console.log("[INFO] Showing settings"); 
    $("#pane-settings").show(); 
    $("#pane-overview").hide(); 
    } 
}); 

Answer 2

あなたのスクリプトはBoostrap Docsに従って適切な順序で含まれていません。 http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn

Codepen：私はどこでも適切な答えや解決策を見つけていないので、 https://codepen.io/hunzaboy/pen/zEBPEw

/* 
 
* Base structure 
 
*/ 
 

 

 
/* Move down content because we have a fixed navbar that is 3.5rem tall */ 
 

 
body { 
 
    padding-top: 3.5rem; 
 
} 
 

 

 
/* 
 
* Typography 
 
*/ 
 

 
h1 { 
 
    margin-bottom: 20px; 
 
    padding-bottom: 9px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 

 

 
/* 
 
* Sidebar 
 
*/ 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 51px; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    padding: 20px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    /* Scrollable contents if viewport is shorter than content. */ 
 
    border-right: 1px solid #eee; 
 
} 
 

 

 
/* Sidebar navigation */ 
 

 
.sidebar { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
} 
 

 
.sidebar .nav { 
 
    margin-bottom: 20px; 
 
} 
 

 
.sidebar .nav-item { 
 
    width: 100%; 
 
} 
 

 
.sidebar .nav-item+.nav-item { 
 
    margin-left: 0; 
 
} 
 

 
.sidebar .nav-link { 
 
    border-radius: 0; 
 
} 
 

 

 
/* 
 
* Dashboard 
 
*/ 
 

 

 
/* Placeholders */ 
 

 
.placeholders { 
 
    padding-bottom: 3rem; 
 
} 
 

 
.placeholder img { 
 
    padding-top: 1.5rem; 
 
    padding-bottom: 1.5rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- First jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!--Then Popper.js --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 

 
<!-- Then Bootstrap --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
 
    <a class="navbar-brand" href="#">Dashboard</a> 
 
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <!-- Navbar --> 
 
    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
 
    <ul class="nav navbar-nav mr-auto"> 
 
     <li role="presentation" class="active nav-item"> 
 
     <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-overview">Übersicht</a> 
 
     </li> 
 
     <li role="presentation" class="nav-item"> 
 
     <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-settings">Einstellungen</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<div class="container-fluid"> 
 
    <div class="tab-content"> 
 
    <div class="tab-pane active" id="tab-overview"> 
 
     <div class="row"> 
 
     <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar"> 
 
      <ul class="nav nav-pills flex-column"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#">Data 1</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Data 2</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Data 3</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 

 
     <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> 
 
      <h1>Dashboard</h1> 
 

 
      <section class="row text-center placeholders"> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <div class="text-muted">Something else</div> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      </section> 
 
     </main> 
 
     </div> 
 
    </div> 
 

 
    <div class="tab-pane" id="tab-settings"> 
 
     <div class="row"> 
 
     <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar"> 
 
      <ul class="nav nav-pills flex-column"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#">Settings 1</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Settings 2</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Settings 3</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 

 
     <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> 
 
      <h1>Einstellungen</h1> 
 

 
      <section class="row text-center placeholders"> 
 
      <div class="col-12 col-sm-12 placeholder"> 
 
       <h4>Label</h4> 
 
       <div class="text-muted">Something else</div> 
 
      </div> 
 
      </section> 
 
     </main> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>