クリックしたときにタブが機能しない

2つのdivが連続しています。最初のdivはメディアクラスを使用し、2番目のdivはタブコンテンツクラスを使用します。基本的に2番目のdivの内側には、タブ付きナビゲーションアニメーションがあります。理解を深めるために、私はちょうど言ったことを説明しています。クリックしたときにタブが機能しない

しかし、私がクリックしたときに他のタブに何も起こりません。ここに私のコードです

<ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"> 
       <a href="#history" aria-controls="history" 
       role="tab" data-toggle="tab">History</a></li> 

       <li role="presentation"> 
       <a href="#events" 
       aria-controls="events" role="tab" 
       data-toggle="tab">Events</a></li> 

       <li role="presentation"> 
       <a href="#tickets" 
       aria-controls="tickets" role="tab" 
       data-toggle="tab">Tickets</a></li> 

       <li role="presentation"> 
       <a href="#hours" 
       aria-controls="hours" role="tab" 
       data-toggle="tab">Hours</a></li> 
</ul> 
<div class="tab-content"> 
      <div role="tabpanel" class="tab-pane fade in active" id="history"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="events"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="tickets"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="hours"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
      </div> 
</div>

アイデア？

ありがとう、 Theo。

出典

2017-02-11 Theo

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
       
 

 
      </style> 
 
      </head> 
 
      <body> 
 
      <ul class="nav nav-tabs" role="tablist"> 
 
       <li role="presentation" class="active"> 
 
       <a href="#history" aria-controls="history" 
 
       role="tab" data-toggle="tab">History</a></li> 
 

 
       <li role="presentation"> 
 
       <a href="#events" 
 
       aria-controls="events" role="tab" 
 
       data-toggle="tab">Events</a></li> 
 

 
       <li role="presentation"> 
 
       <a href="#tickets" 
 
       aria-controls="tickets" role="tab" 
 
       data-toggle="tab">Tickets</a></li> 
 

 
       <li role="presentation"> 
 
       <a href="#hours" 
 
       aria-controls="hours" role="tab" 
 
       data-toggle="tab">Hours</a></li> 
 
</ul> 
 
<div class="tab-content"> 
 
      <div role="tabpanel" class="tab-pane fade in active" id="history"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="events"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="tickets"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="hours"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p> 
 
      </div> 
 
</div> 
 

 
    </body> 
 
    </html>

上記を見てみると、それが正常に動作しているスニペット。

SUGGESTIONS：あなたの完全なコード1.Post

。

ブートストラップCDNが1回だけ含まれていることを確認してください。
タブIDが残りのHTMLコードに重複していないことを確認してください。
また、cdnの順序が重要です。それらを私のものと同じoredrに入れてください。

出典

2017-02-11 23:50:31 neophyte

クリックしたときにタブが機能しない

答えて

関連する問題