标签在点击时不工作

我有两个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

标签在点击时不工作

回答

相关问题