Bootstrap 3：在页面刷新时保持选中的选项卡

Question

Bootstrap 3：在页面刷新时保持选中的选项卡我试图通过Bootstrap 3在刷新时保持选定的选项卡处于活动状态。尝试并检查了一些问题已经在这里被问过，但没有为我工作。不知道我哪里错了。这是我的代码HTML<!-- tabs link --><ul class="nav nav-tabs" id="rowTab">    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>    <li><a href="#warnings" data-toggle="tab">Warning</a></li></ul><!-- end: tabs link --><div class="tab-content">    <div class="tab-pane active" id="personal-info">        tab data here...    </div>    <div class="tab-pane" id="Employment-info">        tab data here...    </div>    <div class="tab-pane" id="career-path">        tab data here...    </div>    <div class="tab-pane" id="warnings">        tab data here...    </div></div>Javascript：// tab$('#rowTab a:first').tab('show');//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {//save the latest tab; use cookies if you like 'em better:localStorage.setItem('selectedTab', $(e.target).attr('id'));});//go to the latest tab, if it exists:var selectedTab = localStorage.getItem('selectedTab');if (selectedTab) {  $('#'+selectedTab).tab('show');}

Answer 1

这是我尝试过的最好的一个：

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });});$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");});

Answer 2

其他人之间的混合回答：

• 没有跳转点击

• 保存位置哈希

• 保存在localStorage上（例如：表单提交）

• 只需复制并粘贴;）

  if (location.hash) {
    $('a[href=\'' + location.hash + '\']').tab('show');}var activeTab = localStorage.getItem('activeTab');if (activeTab) {
    $('a[href="' + activeTab + '"]').tab('show');}$('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
    e.preventDefault()
    var tab_name = this.getAttribute('href')
    if (history.pushState) {
      history.pushState(null, null, tab_name)
    }
    else {
      location.hash = tab_name
    }
    localStorage.setItem('activeTab', tab_name)
    $(this).tab('show');
    return false;});$(window).on('popstate', function () {
    var anchor = location.hash ||
      $('a[data-toggle=\'tab\']').first().attr('href');
    $('a[href=\'' + anchor + '\']').tab('show');});