bootStrap中Tab页签切换

实例

HTML代码如下

<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>

JS代码如下

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