在页面重新加载后，如何使用 Twitter Bootstrap 保持当前选项卡活动？

Question

我知道这个问题之前已经被问过并在以下文章中得到了回答: 如何在页面重新加载后使用Twitter Bootstrap保持当前标签活动状态？ 然而，由于我的脚本知识有限，我无法使其在我的网站上起作用。在将代码放入我的HTML页面后，重新加载页面时选项卡仍会跳转到第一个和活动的选项卡。

请问是否可以有人分享一下在上面链接中提出的解决方案的有效示例。

我的代码如下：

<div class="tabbable" style="margin-bottom: 8px;">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">My Career Centre</a></li>
          <li class=""><a href="#tab2" data-toggle="tab">Hiring Companies</a></li>
          <li class=""><a href="#tab3" data-toggle="tab">Training Providers</a></li>
          <li class=""><a href="#tab4" data-toggle="tab">Advertise</a></li>
          <li class=""><a href="#tab5" data-toggle="tab">Graduate Opportunities</a></li>
          <li class=""><a href="#tab6" data-toggle="tab">Career Forum</a></li>
        </ul>           
        <script type="text/javascript">
                  $(function() 
                    { 
                      $('a[data-toggle="tab"]').on('shown', function (e) {
                        //save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(e.target).attr('id'));
                      });

                      //go to the latest tab, if it exists:
                      var lastTab = localStorage.getItem('lastTab');
                      if (lastTab) {
                          $('#'+lastTab).tab('show');
                      }
                    });
            </script>

        <div class="tab-content" style="padding: 0 5px;">
           <div class="tab-pane active" id="tab1">
                <div class="navbar" style="width:930px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Job Search</a></li>
                        <li><a href="#">Training Programmes</a></li>
                        <li><a href="#">Job Alerts</a></li>
                        <li><a href="#">My Job Applications</a></li>
                        <li><a href="#">My Studies</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received">Received Messages</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab2">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Manage Your Job Adverts</a></li>
                        <li><a href="#">Browse CV's</a></li>
                        <li><a href="#">Manage Job Applications</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my">View Reports For Your Adverts</a></li>
                        <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts">Manage Sub-Accounts</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
          </div>
          <div class="tab-pane" id="tab3">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Browse Training Programmes</a></li>
                        <li><a href="#">Browse Featured Training Providers</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab4">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Training Programmes</a></li>
                        <li><a href="#">Your Company</a></li>
                        <li><a href="#">Your Recruitment Agency</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
           <div class="tab-pane" id="tab5">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Search Current Opportunities</a></li>
                        <li><a href="#">News and Updates</a></li>
                        <li><a href="#">Events</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
          </div>
          <div class="tab-pane" id="tab6">
            <div class="navbar" style="width:900px;">
                  <div class="navbar-inner">
                    <div class="container">
                      <ul class="nav2" style="padding-top:0px;">
                        <li><a href="#">Career Advice</a></li>
                        <li><a href="#">CV/Resume</a></li>
                        <li><a href="#">Interview Preparation</a></li>
                        <li><a href="#">Career Net-Work</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
           </div>
        </div>
        </div>
</div>

非常感谢。

- Grand Masta D

---

你能分享你的代码或者一个示例链接吗？你提供的代码使用了localstorage，但并不是所有浏览器都支持。 - Adam Heath

@AdamHeath，你好，谢谢你的回应。我刚刚更新了我的问题，并附上了我正在使用的代码。 - Grand Masta D

尝试在控制台中打印 $(e.target).attr('id')？我对 Bootstrap 标签页不是很熟悉，但似乎 e.target 可能是您的 a 元素，因此要查找的属性可能是 href（或 data-target）。 - Tommi Komulainen

Answer 1

如Tommi Komulainen所述：e.target包含完整的url，包括哈希值。您只需要哈希值。因此，请使用e.target.toString().split('#')[1])；甚至更好的是使用$(this).attr('href')

$('#'+lastTab).tab('show');将.tab()应用于id=#{lastTab}的div，而您需要将其应用于带有data-toggle的链接（a标签）。因此，在这里使用：$('a[href=#' + lastTab + ']').tab('show');

要使用的完整函数：

                  $(function() 
                    { 
                      $('a[data-toggle="tab"]').on('shown', function () {
                        //save the latest tab; use cookies if you like 'em better:
                        localStorage.setItem('lastTab', $(this).attr('href'));
                       });

                      //go to the latest tab, if it exists:
                      var lastTab = localStorage.getItem('lastTab');
                      if (lastTab) {
                         $('a[href=' + lastTab + ']').tab('show');
                      }
                      else
                      {
                        // Set the first tab if cookie do not exist
                        $('a[data-toggle="tab"]:first').tab('show');
                      }
                  });

更新：请查看https://dev59.com/AGkv5IYBdhLWcg3wiRao#16016592，因此从您的源中删除活动类并在未设置lastTab时将第一个选项卡设为活动状态。

- Bass Jobsen

---

有没有一种好的方法，可以使localStorage在您从与该视图相关的页面集之外的某个页面到达该页面时首先被清除（例如，前一个URL不匹配某个前缀）？ - user9645

Answer 2

我更喜欢使用pushstate。对我来说，它更像是“Web方式...”，并且它允许我有外部链接直接指向我想要显示的选项卡。

这是我的函数：

function setBootstrapTabs()
{
    var activeTab = "#" + getParameterByName("submenu");

    $('a[data-toggle="tab"]').on('shown', function () {
        //save the latest tab;
        var new_url = updateUrlParam("submenu",
            $(this).attr('href').replace("#",""));
        window.history.replaceState({
                turbolinks: true, position: Date.now()
            }, document.title, new_url
        );
    });

    if (activeTab.length > 0) {
        $('a[href=' + activeTab + ']').tab('show');
    }
};

- ndemoreau