Question

我有自动引导标签导航，在页面index.php上工作正常，目前当我点击非任何标签页面的网址保持不变时，我想知道有没有办法可以更改网页的网址，每当单击选项卡时，我都可以跟踪用户选择的选项卡。

例如：如果用户点击标签A，则网址可能会变为的index.php？标签= A
要么如果用户点击标签B，则网址可能会变为的index.php？标签= B

<ul class="nav nav-tabs ">
    <li class="active col-md-3">
        <a href="#tab_default_1" data-toggle="tab" > A </a>
    </li>
    <li class="col-md-3">
        <a href="#tab_default_2" data-toggle="tab" > B </a>
    </li>
</ul>

<div class="tab-pane active" id="tab_default_1">
</div>


<div class="tab-pane" id="tab_default_2">
</div>

Answer 1

您需要使用以下内容更改a标记：

    <a href="index.php#tab_default_1" data-toggle="tab" > A </a>
    <a href="index.php#tab_default_2" data-toggle="tab" > B </a>

你试过这个吗？

Answer 2

使用“shown.bs.tab”事件获取单击的选项卡，该事件在选项卡激活后触发，并将单击的选项卡“href”保存到本地存储，以便稍后通过从本地存储获取并手动打开它使其处于活动状态

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
               // save current clicked tab in local storage
                localStorage.setItem('lastActiveTab', $(this).attr('href'));
            });
            //get last active tab from local storage
            var lastTab = localStorage.getItem('lastActiveTab');
alert(lastTab +"tab was last active")
            if (lastTab) {
                $('[href="' + lastTab + '"]').tab('show');
            }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
 <div>

  <!-- Nav tabs -->
  <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>

</div>
</div>

引导程序中的选项卡导航

2 个答案: