选项卡在单击时不起作用
Tabs not working when they are clicked
我连续有两个 div。第一个 div 使用媒体 class，第二个使用标签内容 class。基本上在第二个 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»</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»</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»</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»</a></p>
</div>
</div>
有什么想法吗？
谢谢，
西奥.
<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»</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»</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»</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»</a></p>
</div>
</div>
</body>
</html>
看看上面的代码片段，它工作正常。
建议：
1.Post 你的完整代码。
确保您的 bootstrap cdn 仅包含一次。
确保选项卡 ID 在其余 html 代码中没有重复。
cdn 的顺序也很重要。将它们包含在与我相同的目录中。
我连续有两个 div。第一个 div 使用媒体 class，第二个使用标签内容 class。基本上在第二个 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»</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»</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»</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»</a></p>
</div>
</div>
有什么想法吗？
谢谢， 西奥.
<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»</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»</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»</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»</a></p>
</div>
</div>
</body>
</html>
看看上面的代码片段，它工作正常。
建议：
1.Post 你的完整代码。
确保您的 bootstrap cdn 仅包含一次。
确保选项卡 ID 在其余 html 代码中没有重复。
cdn 的顺序也很重要。将它们包含在与我相同的目录中。