页面刷新jquery后如何保持当前选项卡处于活动状态答案

【问题标题】：How to keep current tab active after page refresh jquery页面刷新jquery后如何保持当前选项卡处于活动状态
【发布时间】：2017-02-10 11:08:00
【问题描述】：

我的代码有两个问题。

首先：我想在页面刷新后保持最后选择的选项卡处于活动状态。问题是页面刷新时第一个选项卡始终处于活动状态。

第二：当用户通过链接更改密码进入此页面时。此时我想让第二个（更改密码）选项卡处于活动状态。

这是我的代码：

<ul class="tab">
    <li class="current" data-tab="tab1">Account information</li>
    <li data-tab="tab2">Change Password</li>
</ul>

<div class="tab-content current" id="tab1">
    Tab1 Content comes Here!
</div>
<div class="tab-content" id="tab2">
    Tab1 Content comes Here!
</div>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('ul.tab li').click(function(){
            var tab_id = $(this).attr('data-tab');
            $('ul.tab li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        });
    });
</script>

【问题讨论】：

很明显，当页面加载时，第一个标签将获得焦点，因为current类。
当用户点击更改密码时，您必须将数据保存在某处。根据该数据，您可以将current 类动态插入到第二个选项卡
我正在寻求答案，我该怎么做？

标签： javascript jquery

【解决方案1】：

使用 sessionStorage 存储哪个选项卡处于活动状态并将当前类应用于活动选项卡。页面刷新后会话存储变量仍然存在。

【讨论】：

【解决方案2】：

这可能会有所帮助。

$(document).ready(function(){
  if(localStorage.getItem("CURRENT_TAB")=="tab2"){
     var x=$("li.tab2");
     $("li").not(x).removeClass("current");
     x.addClass("current");
  }
  $(".tab li").click(function(){
    if($(this).hasClass("tab2")){
      localStorage.setItem("CURRENT_TAB","tab2");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab">
<li class="current tab1">TAB 1</li>
<li class="tab2">TAB 2</li>
</ul>

【讨论】：

根据第二个问题更改密码是其他链接，它不是标签的一部分，就像更改密码

【解决方案3】：

你可以把它保存到localStorage：

$(document).ready(function() {
  var last_id = localStorage.getItem('tab_id');
  if (last_id) {
    $('ul.tab li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(".tab li").eq(last_id.match(/\d+/)[0]-1).addClass('current');
    $("#" + last_id).addClass('current');
  }
  $('ul.tab li').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('ul.tab li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
    localStorage.setItem('tab_id', tab_id);
  });
});

以下是工作示例： https://jsfiddle.net/k5j9qv4k/2/

至于第二个问题，我假设您不在这个有标签的页面中。然后你可以将tab_id='tab2'保存到localStorage：

<a href="pageurl" onclick="localStorage.setItem('tab_id', 'tab2');">change password</a>

【讨论】：

在我的第一个问题中，如果用户单击第二个选项卡之类的任何其他选项卡并在此之后刷新页面，我希望激活第二个选项卡
当你点击li时，你可以将你的tab_id保存到localStorage，当你重新加载它时，你可以在准备好的文档中恢复该id
目前它工作正常。谢谢你，帮我解决第二个问题
当您点击更改密码时，该选项卡将变为活动状态。
根据第二个问题修改密码不是tab内容的一部分。它在其他位置，例如更改密码

【解决方案4】：

您可以使用本地存储。在标签页中编写以下代码。

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('currentActiveTab', $(e.target).attr('href'));
});
var currentActiveTab = localStorage.getItem('currentActiveTab');
if(currentActiveTab){
    $('#TABID a[href="' + currentActiveTab+ '"]').tab('show');
}

【讨论】：