在頁面重新加載後記住jQuery選項卡位置

我有一個包含一些GridViews的頁面。我使用標籤菜單將它們保存在標籤中。有四個選項卡。在頁面重新加載後記住jQuery選項卡位置

我的問題是當頁面重新加載時，選項卡被重置爲第一個選項卡。

HTML：

<div id="tabbed_box_1" class="tabbed_box"> 
    &nbsp; &nbsp; 
    <div class="tabbed_area"> 
     <ul class="tabs"> 
      <li><a href="#" title="content_1" class="tab active">Bottom Banner</a></li> 
      <li><a href="#" title="content_2" class="tab">Side Banner Bottom</a></li> 
      <li><a href="#" title="content_3" class="tab">Side Banner Top</a></li> 
      <li><a href="#" title="content_4" class="tab">Main Ad</a></li> 
     </ul> 
     <div id="content_1" class="content"> 
      <table width="500" border="0" align="center" cellpadding="0" cellspacing="2" class="border"> 
       <tr> 
        <td align="center"> 
         //some gridview here 
        </td> 
       </tr> 
      </table> 
     </div> 
     //similarly three more gridviews

的jQuery：

$(document).ready(function() { 

    // When a link is clicked 
    $("a.tab").click(function() { 

     // switch all tabs off 
     $(".active").removeClass("active"); 

     // switch this tab on 
     $(this).addClass("active"); 

     // slide all content up 
     $(".content").slideUp(); 

     // slide this content up 
     var content_show = $(this).attr("title"); 
     $("#" + content_show).slideDown(); 

    }); 
});

我怎樣才能讓當前點擊的標籤上顯示，即使經過重新加載頁面？

來源

2013-04-17 nitinvertigo

簡單的解決方案是使用localStorage堅持選擇：

$(document).ready(function() { 

     function activate(tab) { 
      // switch all tabs off 
      $(".active").removeClass("active"); 

      // switch this tab on 
      tab.addClass("active"); 

      // slide all content up 
      $(".content").slideUp(); 

      // slide this content up 
      var content_show = tab.attr("title"); 
      $("#" + content_show).slideDown(); 
     } 

     if (localStorage) { // let's not crash if some user has IE7 
      var index = parseInt(localStorage['tab']||'0'); 
      activate($('a.tab').eq(index)); 
     } 

     // When a link is clicked 
     $("a.tab").click(function() { 
      if (localStorage) localStorage['tab'] = $(this).closest('li').index(); 
      activate($(this)); 
     }); 

    });

來源

2013-04-17 07:44:38

本地存儲僅提供給它的瀏覽器。在這裏檢查一個列表http://diveintohtml5.info/storage.html –

[即使IE8有localStorage]（http://caniuse.com/#feat=namevalue-storage）... –

不幸的是一些項目甚至在IE8之前需要支持（不幸的是，自我體驗！） –

您可以嘗試使用在你的URL的主題標籤只要單擊一個選項卡，然後在你的代碼，你檢查是否存在一個哈希標籤，哪個標籤對應的標識。

<ul id="tabs"> 
    <li><a id="category1" href="#category1">Category 1</a></li> 
    <li><a id="category2" href="#category2">Category 2</a></li> 
    <li><a id="category3" href="#category3">Category 3</a></li> 
</ul> 

if(window.location.hash) { 
    $(window.location.hash).click(); 
}

基於：Jquery, activate script if hashtag on end of URL matches a class name

來源

2013-04-17 07:47:51

在頁面重新加載後記住jQuery選項卡位置

回答

相關問題