Сохраняйте добавленный класс с помощью JQuery через обновление страниц

Question

У меня есть следующий код JQuery, касающийся моих вкладок:

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

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

, он работает, но как только я нажимаю на вкладку, которая ведет меня на другую страницу, вкладка получает свой первоначальный класс ...таким образом, его внешний вид, наконец, не меняется ..

<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> 

как я должен держать вкладку с классом "Selectionne"?.... спасибо kkkkk!

Answer 1

Если вы загружаете новую статическую страницу, а выбранная вкладка является просто ссылкой на эту страницу, почему выбранная вкладка жестко не закодирована на каждой странице?Если вы обслуживаете свои страницы динамически, почему сервер не устанавливает выбранный класс при создании страницы?Похоже, что эти вкладки перемещаются между набором статических HTML-страниц, поэтому я не уверен, почему вам нужно установить этот класс после загрузки страницы с использованием JavaScript.

Но, если по какой-то причине мне не хватает этого для установки после загрузки страницы, вы можете использовать jquery address или какой-либо другой плагин типа истории для сохранения выбора вкладки в URLчтобы вы могли разобрать его после загрузки страницы, что-то вроде http://fake.com/foo.html#/tab1.Или, без плагина, вы можете просто проверить, какую страницу вы выбрали при загрузке и установить вкладку следующим образом:

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

Answer 2

Если вы полностью перезагрузите / загрузите страницу в href, это будет другая страница, следовательно, все будет перезагружено и ваши добавленные классы js вернутся к начальным классам.

Вам нужно будет запомнить его на сервере или передать его в параметре url, который вы анализируете в js, и посмотрите, что запрашивается, активируя класс справа li.

Или динамически загружать контент и оставаться на той же странице.