navbarは何も表示していません

私は3つのリンクを持つnavbarを持っています。各タブではテーブルを表示したいのですが、別のリンクをクリックすると別のテーブルを表示したいのです。navbarは何も表示していません

私は以下のコードでこれを実行しようとしていますが、動作しません。私はページに何も表示されていません。

なぜ機能していないのですか？

HTML：

<body> 
    <div class="container"> 
    <div class=".md-xs-4"> 
     <ul class="nav nav-pills"> 
     <li> 
      <a href="#Table">Table Link</a> 
     </li> 
     <li> 
      <a href="#Table2">Tabl2 Link</a> 
     </li> 
     </ul> 
    </div> 
    <div class=".md-xs-4"> 
     <div class="tab-content"> 
     <div class="tab-pane fade" id="Table"> 
      <table class="table" style="border: 1px solid #ddd;"> 
      <td>a</td> 
      <td>b</td> 
      </table> 

      <div class="tab-content"> 
      <div class="tab-pane fade" id="Table2"> 
       <table class="table" style="border: 1px solid #ddd;"> 
       <td>a</td> 
       <td>b</td> 
       </table> 

      </div> 
      </div> 
     </div> 
     </body>

https://jsfiddle.net/z2kLaxaj/

出典

2016-10-12 Azz

あなたはJavaScriptコードが必要になります。 –

jQueryにリンクする必要があります。コンソールにエラーがあります。「キャッチされていないエラー：ブートストラップのJavaScriptにjQueryが必要」 – Jeff

あなたの構文は少しオフになっている - そして、あなたのフィドルでのjQueryを逃しています。ロードbootstrap.js前に、あなたの<head>に次のコードを追加します

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

をそして、あなたのコードは次のようになります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <ul class="nav nav-pills"> 
 
    <li class="active"><a data-toggle="pill" href="#table1">Table Link</a> 
 
    </li> 
 
    <li><a data-toggle="pill" href="#table2">Table Link 2</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div id="table1" class="tab-pane fade in active"> 
 
     <table class="table" style="border: 1px solid #ddd;"> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     </table> 
 
    </div> 
 
    <div id="table2" class="tab-pane fade"> 
 
     <table class="table" style="border: 1px solid #ddd;"> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-10-12 18:59:43 NickyTheWrench

ありがとうございました。本当にその問題でした。 – Azz

navbarは何も表示していません

答えて

関連する問題