我查看了各种其他示例，但我的 Bootstrap 选项卡似乎仍然无法正常工作。 我的代码如下。谁能帮我一把？
<body>
<ul class="nav nav-tabs" id = "myTab">
<li class = "active"><a href= "home" data-toggle="tab">Home</a></li>
<li><a data-target="About" data-toggle="tab">About</a></li>
<li><a data-target="Events" data-toggle="tab">Events</a></li>
<li><a data-target="LargeGroups" data-toggle="tab">Large Groups</a></li>
<li><a data-target="SmallGroups" data-toggle="tab">Small Groups</a></li>
<li><a data-target="Admin" data-toggle="tab">Admin</a></li>
</ul>
<div tab-content>
<div class= "tab-pane active" id="About" >
<p>And this is the about tab.</p>
</div>
<div id="Events" class="tab-pane">
<p>And this is the photo tab.</p>
</div>
<div id="LargeGroups" class="tab-pane">
<p>This is the Large Groups tab.</p>
</div>
<div id="SmallGroups" class="tab-pane">
<p>Hi, this is the small groups tab.</p>
</div>
</div><!-- /.tab-content -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
最佳答案
您需要更改标记:
文档:http://getbootstrap.com/javascript/#tabs
改变你的代码，为此:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation"><a href="#About" aria-controls="settings" role="tab" data-toggle="tab">About</a></li>
<li role="presentation"><a href="#Events" aria-controls="settings" role="tab" data-toggle="tab">Events</a></li>
<li role="presentation"><a href="#LargeGroups" aria-controls="settings" role="tab" data-toggle="tab">Large Groups</a></li>
<li role="presentation"><a href="#SmallGroups" aria-controls="settings" role="tab" data-toggle="tab">Small Groups</a></li>
<li role="presentation"><a href="#Admin" aria-controls="settings" role="tab" data-toggle="tab">Admin</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class= "tab-pane active" id="About" >
<p>And this is the about tab.</p>
</div>
<div id="Events" class="tab-pane">
<p>And this is the photo tab.</p>
</div>
<div id="LargeGroups" class="tab-pane">
<p>This is the Large Groups tab.</p>
</div>
<div id="SmallGroups" class="tab-pane">
<p>Hi, this is the small groups tab.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>
关于javascript - 让 Tabs 为 BootStrap 工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27198929/