切换卡或叫标签页组件。它与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