Jquery keeps the selected tabs on each page if the page is refreshed

advertisements

i have this HTML Code:

<div class="tab-box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a>
        <a href="javascript:;" class="tabLink" id="tab2">Tab2</a>
        <a href="javascript:;" class="tabLink" id="tab3">Tab3</a>
        <a href="javascript:;" class="tabLink" id="tab4">Tab4</a>
        </div>

this lists the tabs...

then each tab is like:

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

<div class="tabcontent hide" id="tab2-1">
tab1 content
</div>

<div class="tabcontent hide" id="tab3-1">
tab1 content
</div>

<div class="tabcontent hide" id="tab4-1">
tab1 content
</div>

then the jquery code:

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

the jquery above, i have tried to make it so it remembers the last tab selected if the page is refreshed. however, this only works with one page. if i change to view a different page with tabs, it selects a random tab as i cannot find the last one selected because it was on a different page with a different name.

how can i make it remember the last selected tab for each page?


What about cookies?

document.cookie = "tabId=" + tabeId;

then check it:

tabId = document.cookie