切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。
切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。
面板区要求就相对宽松些，容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。
<ul id="mytab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">首页</a></li> <li><a href="#profile" data-toggle="tab">介绍</a></li> <li><a href="#messages" data-toggle="tab">消息</a></li> <li><a href="#settings" data-toggle="tab">设置</a></li></ul><div class="tab-content"> <div class="tab-pane active" id="home">111</div> <div class="tab-pane" id="profile">2222</div> <div class="tab-pane" id="messages">333</div> <div class="tab-pane" id="settings">444.</div></div> |
这样你直接引入JS就能用了，但你必须为当中某个标签页的LI元素指定"active"类名
如果你想用JS明确指定哪个面板被激活，你是要对它的某个标签页的链接使用tab("show")方法，而不是作用于它的容器上。这个与其他jQuery插件有点不同。
$(function () { $('.nav-tabs a:last').tab('show')}) |
<!DOCTYPE html>
<html>
<head>
<title>bootstrap学习 by 司徒正美</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://files.cnblogs.com/rubylouvre/bootstrap.css"/>
<script src="https://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-tab.js"></script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script>
<script>
$(function () {
var log = function(s){
window.console && console.log(s)
}
$('.nav-tabs a:last').tab('show')
$('a[data-toggle="tab"]').on('show', function (e) {
log(e)
})
$('a[data-toggle="tab"]').on('shown', function (e) {
log(e.target) // activated tab
log(e.relatedTarget) // previous tab
})
})
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">介绍</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">111</div>
<div class="tab-pane" id="profile">2222</div>
<div class="tab-pane" id="messages">333</div>
<div class="tab-pane" id="settings">444.</div>
</div>
</body>
</html>
它要引入navs.less
