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