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”类的标签？ .... thankkkkkk你！

Answer 1

如果您要加载新的静态页面，并且所选标签只是该页面的链接，为什么选中的标签不会硬编码到每个页面？如果您动态地为页面提供服务，为什么服务器在生成页面时不会设置所选的类？看起来这些选项卡在一组静态html页面之间导航，所以我不确定为什么在使用JavaScript加载页面后需要设置此类。

但是，如果我在设置此页面加载后缺少某些原因，您可以查看使用jquery address或其他一些历史记录类型插件来保留网址中的标签选择，以便您可以解析它页面加载后，如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添加的类返回到初始类。

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

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

通过页面刷新继续使用JQuery添加类

2 个答案: