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来实现了。