不同页面中的Bootstrap选项卡选择

时间:2016-12-02 12:29:25

标签: jquery twitter-bootstrap

我在三个不同的页面中有三个不同的标签。如何在页面刷新后选择不同的选项卡。如果我在一页中选择了第二个选项卡,则在其他页面中,第二个选项卡也会被选中。下面是我的标签代码

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

1 个答案:

答案 0 :(得分:0)

您可以在链接中使用哈希来通过javascript激活网址中的任何标签。

网址:http://someurl.com/#tab-id

$(function(){
  if(window.location.hash!=''){
    var hash=window.location.hash;
    $('.nav-tabs a[href='+hash+']').click();
  }
}