单击时选项卡不起作用答案

【问题标题】：Tabs not working when they are clicked单击时选项卡不起作用
【发布时间】：2017-02-11 15:01:50
【问题描述】：

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

有什么想法吗？

谢谢，西奥。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-tabs

【解决方案1】：

<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>

看看上面的 sn-p 它工作正常。

建议：

1.发布您的完整代码。

确保您的引导 cdn 仅包含一次。
确保标签 ID 在您的其余 html 代码中不重复。
cdn 的顺序也很重要。将它们包含在与我相同的 oredr 中。

【讨论】：