Keep added class with JQuery through pages refresh..

Question

Hello everyone, I have the following JQuery Code concerning my tabs :

$("#onglet>ul>li").click(function(){

      $("#onglet ul li").removeClass('Selectionne').addClass("OngletPrincipal");    
  $(this).removeClass().addClass('Selectionne');
  $(this).unbind('mouseenter mouseleave');

it works, but as soon as I click on a tab which leads me to another page, the tab gets its original class.... so its appearance finally doesn't change..

<div id="onglet">
    <ul >
      <li class="OngletPrincipal">
      <a href="masterPage.html">Accueil</a>
      </li>
      <li class="OngletPrincipal">
        <a href="masterPage.html">Catalogue </a>
      </li>
      <li class="OngletPrincipal">
      <a href="Societe.html"> Nous  </a>
      </li>
      <li class="OngletPrincipal">
        <a href="contact.html"> Contacts     </a>
      </li>
      <li class="OngletPrincipal">
       <a href="tableauBord.html">   Espace client</a>
      </li>
    </ul>
  </div> 

how I am supposed to keep the tab with the "Selectionne" class ? .... thankkkkkk you !

Answer 1

If you completely reload/load the page in the href, it's another page, hence everything is reloaded and your by js added classes are back to the initial classes.

You will have to remember it serverside, or pass it in a url parameter that you parse in js and see what is requested, activating the class on the right li.

Or dynamically load the content and stay on the same page.

Answer 2

If you are loading a new static page, and the selected tab is just a link to that page, why isn't the selected tab hard coded into each page? If your serving your pages dynamically, why isn't the server set the selected class when it generates the page? It looks like these tabs are navigating between a set of static html pages, so I'm not sure why you need to set this class after the page loads using JavaScript.

But, if there is some reason I'm missing for setting this after page load you could look into using jquery address or some other history type plugin to persist the tab selection in the url so that you can parse it after the page loads, something like http://fake.com/foo.html#/tab1. Or, without the plugin you could just check which page you selected on load and set the tab that way:

$(document).ready(function(){
    var loc = window.location.toString();
    var page = loc.substring(
        loc.lastIndexOf('/',0) + 1, 
        loc.length);
    $('#onglet>ul>li>a[href$="' + page + '"]').parent().addClass('Selectionne');
});