Question

我的代码有两个问题。

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

第二：当用户通过链接更改密码进入此页面时。这时我想激活第二个（更改密码）标签。

这是我的代码：

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

Answer 1

如果你想这样做，你必须将它保存在某个地方，然后你就可以申请上课了。

如果您刚刚练习，我会建议您使用Local Storage

Answer 2

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

Answer 3

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

Answer 4

这可能会有所帮助。

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

Answer 5

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

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

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

5 个答案: