javascript 如何在页面刷新jquery后保持当前选项卡活动

vmjh9lq9  于 2023-06-28  发布在  Java
关注(0)|答案(4)|浏览(121)

我对我的代码有两个问题。
第一:我想在页面刷新后保持最后选择的选项卡处于活动状态。问题是当页面刷新时,第一个选项卡始终处于活动状态。
第二:当用户来到这个页面时,通过链接更改密码。在这个时候,我想使第二个(更改密码)选项卡活动。
下面是我的代码:

<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>
p8h8hvxi

p8h8hvxi1#

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

bvuwiixz

bvuwiixz2#

这个可能会有帮助

$(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>
gkn4icbw

gkn4icbw3#

您可以将其保存到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>
slmsl1lt

slmsl1lt4#

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

$('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');
}

相关问题