关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航:
-
<ul class="nav nav-tabs" id="myTab">
-
<li class="active"><a href="#home">Home</a></li>
-
<li><a href="#profile">Profile</a></li>
-
<li><a href="#messages">Messages</a></li>
-
<li><a href="#settings">Settings</a></li>
-
</ul>
-
-
<div class="tab-content">
-
<div class="tab-pane active" id="home">...</div>
-
<div class="tab-pane" id="profile">...</div>
-
<div class="tab-pane" id="messages">...</div>
-
<div class="tab-pane" id="settings">...</div>
-
</div>
-
-
<script>
-
$(function () {
-
$('#myTab a:last').tab('show');//初始化显示哪个tab
-
-
$('#myTab a').click(function (e) {
-
e.preventDefault();//阻止a链接的跳转行为
-
$(this).tab('show');//显示当前选中的链接及关联的content
-
})
-
})
-
</script>
此外,你还可以有更多灵活的方式来激活某个特定的tab:
-
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
-
$('#myTab a:first').tab('show'); // Select first tab
-
$('#myTab a:last').tab('show'); // Select last tab
-
$('#myTab li:eq(2) a').tab('show');
以上代码需要注意的一点是,每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用
javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有
必要在用js来实现了:
以上代码需要注意的一点是,每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用
javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有
必要在用js来实现了:
阅读(81017) | 评论(1) | 转发(1) |