通过页面刷新使用 JQuery 保持添加的类答案

【问题标题】：Keep added class with JQuery through pages refresh通过页面刷新使用 JQuery 保持添加的类
【发布时间】：2010-06-28 15:21:12
【问题描述】：

我的标签有以下 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”类保留标签？ …… 谢谢你！

【问题讨论】：

标签： javascript jquery html css

【解决方案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');
});

【讨论】：

【解决方案2】：

如果您在 href 中完全重新加载/加载页面，则它是另一个页面，因此所有内容都会重新加载，并且您通过 js 添加的类将返回到初始类。

您必须在服务器端记住它，或者将它传递给您在 js 中解析的 url 参数并查看请求的内容，激活右侧 li 上的类。

或者动态加载内容并停留在同一页面上。

【讨论】：