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

第一张：我想在页面刷新后保持上次选择的选项卡有效。问题是页面刷新第一个标签时总是处于活动状态。

第二个：当用户通过链接更改密码来到此页面时。这时我想让第二个（更改密码）选项卡激活。

这里我的代码：

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

来源

2017-02-10 zero

其明显的是，当页面加载时，第一个选项卡将获得因为'current'类的重点。 – Hemal

当用户单击更改密码时，您必须将数据保存在某处。根据这些数据，你可以动态地插入'当前'类到第二个标签 – Hemal

我在问我要怎么做？ – zero

如果你想这样做，那么你将必须保存在某个地方，然后你就可以在适用类。

如果你只是练了那么我会建议你使用Local Storage

来源

2017-02-10 11:14:15

我更新鲜jquery所以请你可以解释给我。 – zero

你可以将它保存到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>

来源

2017-02-10 11:14:19 imudin07

在我的第一个问题，如果用户点击任何其他选项卡，如第二个选项卡，刷新页面后，我想第二个选项卡激活 – zero

当你点击'li'，你可以保存你的tab_id localStorage，当你重新加载它，你可以得到该id回到文档准备 – imudin07

请检查链接，我更新 – imudin07

使用的sessionStorage存储哪个选项卡是活动的，适用电流类活动标签。会话存储变量在页面刷新后仍然存在。

来源

2017-02-10 11:15:01

这可能有帮助。

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

来源

2017-02-10 11:27:36 Hemal

根据到第二个问题更改密码是其他链接它不是标签的一部分它像 change password – zero

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

回答

相关问题