2

私はこのjqueryコードを持っています:

<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  
  });
</script>

このコードを使用してページが更新された場合にタブが記憶されるようにしようとしています:

<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        localStorage.selectedTab = $(this).index() + 1;
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  

    // search for local storage
    if (localStorage.selectedTab) {
      $(".tabLink:eq(" + (localStorage.selectedTab - 1) + ")").click();
    }
  });
</script>

HTML:

<div class="tab-box">
        <a href="javascript:;" class="tabLink activeLink" id="viewcustomer">View Customer</a> 
        <a href="javascript:;" class="tabLink activeLink" id="viewresellercustomers">View Reseller Customer</a> 
        <a href="javascript:;" class="tabLink activeLink" id="viewsalesmancustomer">View Salesman Customer</a> 
        <a href="javascript:;" class="tabLink" id="archivedcustomers">View Archived Customer</a> 
        </div>

<div class="tabcontent" id="viewcustomer-1">
content...
</div>.....

正常に動作しますが、タブは複数のページにあるため、別のページに移動すると、最後に選択したタブを記憶しようとして別のタブが選択されます。

各ページで最後に選択したタブを記憶させるにはどうすればよいですか?

4

2 に答える 2

1

選択を永続化する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-09-18T15:19:11.357 に答える
0

次のように、選択したタブに URL をリンクするマップを作成できます。

tabStorage = { 
 "page_url_1" : 1,
 "page_url_2" : 3
}

を使用して、現在のページの URL を取得できますwinow.location。

次に、オブジェクトではなくキーと値のペアのみを保持するため、保存/取得するにはJSON.stringify/を使用します。ここでのキーは「タブ」で、値は地図の立体的な表現です。JSON.parselocalStorage

$(document).ready(function() {
   var tabStorage = (localStorage && localStorage.tabs) ? JSON.parse( localStorage.tabs ) : {};
   $(".tabLink").click(function(){
      tabStorage[ window.location ] =  $(".tabLink").index( this );
      if(localStorage) {
          localStorage.tabs = JSON.stringify( tabStorage );
      }
   });

   if (tabStorage[ window.location ]) {
      $(".tabLink").eq( tabStorage[ window.location ] ).trigger('click');
   }
});
于 2013-09-18T15:23:57.580 に答える