bootstrap源码学习与示例：bootstrap-tab - HackerVirus
bootstrap源码学习与示例：bootstrap-tab
切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。
切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。
面板区要求就相对宽松些，容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。
|
这样你直接引入JS就能用了，但你必须为当中某个标签页的LI元素指定"active"类名
如果你想用JS明确指定哪个面板被激活，你是要对它的某个标签页的链接使用tab("show")方法，而不是作用于它的容器上。这个与其他jQuery插件有点不同。
|
<!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" >111</div>
<div class="tab-pane" >2222</div>
<div class="tab-pane" >333</div>
<div class="tab-pane" >444.</div>
</div>
</body>
</html>
它要引入navs.less
posted on 2012-12-23 18:28 HackerVirus 阅读(187) 评论(0) 编辑收藏举报
