如何保持頁面刷新後當前選項卡激活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

回答

相關問題