標籤在點擊時不工作

我有兩個div連續。第一個div使用媒體類，第二個使用tab-content類。基本上在第二個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>

在上述

看片斷它工作正常。

幾點建議：

1.Post你的全部代碼。

請確保您的引導程序cdn只包含一次。
確保選項卡的ID在您的其他HTML代碼中不重複。
也是cdn的順序很重要。把他們包括在我的同一位僕人中。

來源

2017-02-11 23:50:31 neophyte

標籤在點擊時不工作

回答

相關問題