BootStrap中Tab页签切换实例代码.doc

　　这篇文章主要介绍了BootStrap中Tab页签切换实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
　　关于$().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来实现了。