Question

我连续两个div。第一个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>

有什么想法吗？

谢谢，西奥。

Answer 1

＆＃13;

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

＆＃13;

看看上面的代码片段，它运行正常。

<强> SUGGESTIONS：

1.发布完整的代码。

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

标签点击后标签无效

1 个答案: