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

Answer 2

其他人之间的混合回答：没有跳转点击保存位置哈希保存在localStorage上（例如：表单提交）只需复制并粘贴;）if&nbsp;(location.hash)&nbsp;{ &nbsp;&nbsp;$('a[href=\''&nbsp;+&nbsp;location.hash&nbsp;+&nbsp;'\']').tab('show');}var&nbsp;activeTab&nbsp;=&nbsp;localStorage.getItem('activeTab');if&nbsp;(activeTab)&nbsp;{ &nbsp;&nbsp;$('a[href="'&nbsp;+&nbsp;activeTab&nbsp;+&nbsp;'"]').tab('show');}$('body').on('click',&nbsp;'a[data-toggle=\'tab\']',&nbsp;function&nbsp;(e)&nbsp;{ &nbsp;&nbsp;e.preventDefault() &nbsp;&nbsp;var&nbsp;tab_name&nbsp;=&nbsp;this.getAttribute('href') &nbsp;&nbsp;if&nbsp;(history.pushState)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;history.pushState(null,&nbsp;null,&nbsp;tab_name) &nbsp;&nbsp;} &nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;location.hash&nbsp;=&nbsp;tab_name &nbsp;&nbsp;} &nbsp;&nbsp;localStorage.setItem('activeTab',&nbsp;tab_name) &nbsp;&nbsp;$(this).tab('show'); &nbsp;&nbsp;return&nbsp;false;});$(window).on('popstate',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;var&nbsp;anchor&nbsp;=&nbsp;location.hash&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;$('a[data-toggle=\'tab\']').first().attr('href'); &nbsp;&nbsp;$('a[href=\''&nbsp;+&nbsp;anchor&nbsp;+&nbsp;'\']').tab('show');});