jQuery：添加活动类/状态并持有它！答案

【问题标题】：jQuery: Add active class / state and hold it!jQuery：添加活动类/状态并持有它！
【发布时间】：2010-12-27 20:53:39
【问题描述】：

我不知道这是否可行，但现在我有一个左侧导航栏，里面有一堆链接。我通过检查它指向的 url 和当前页面 url，向用户单击的任何链接项添加一个活动类（处于状态）。这很好用。

$("#sidebar-nav ul li a").each(function() {
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
$(this).addClass("active");
});

但是，当人们在他们登陆的初始页面的其他页面中单击时，我需要继续“保持”该元素上的活动状态/类。因为每个侧边栏链接都代表一个“类别”，所以我想保留该侧边栏链接不仅在网址匹配的第一页上有效，而且在整个页面上都有效。

现在，一旦用户在他们登陆的第一页内点击离开，活动状态就会丢失，因为网址不再匹配。如果他们单击另一个 sidbar 导航，我只希望删除活动状态。希望这是有道理的，但是有没有办法“保持”最初设置活动状态的整个过程......除非人们点击侧边栏导航的另一个元素？

HTML：

<div id="sidebar-nav">
   <ul>                         
     <li><a href="link1">Link One</a></li>
     <li><a href="link2">Link Two</a></li>
     <li><a href="link3">Link Three</a></li>
     <li><a href="link4">Link Four</a></li>
   </ul>
</div>

【问题讨论】：

已发布。问题是我真的没有像 /category1/link1 category1/link2 这样的任何结构......所以下面的建议不起作用。
你能发布一些你的结构的例子吗？本质上，如果您想要一个灵活的解决方案，则 url 中的某些内容需要确定您所在的类别。否则，您可以查找特定链接并将其映射到 javascript 中作为硬编码数组的类别，但这样做会造成可维护性噩梦

标签： jquery

【解决方案1】：

我能想到的最简单（除非它禁止页面功能）的方法是通过链接传递锚点，然后在页面加载时检查 document.location.hash 并相应地“选择”类别。

或者，由于您已经在比较 href，只需比较路径位置以及它们是否从当前路径开始（假设如下：）

<ul>
  <li><a href="/cateogry">Cateogory 1</a><ul>
    <li><a href="/category1/sub1">Sub 1</a></li>
    <li><a href="/category1/sub2">Sub 2</a></li>
    <li><a href="/category1/sub3">Sub 3</a></li>
  </l></li>
  ...
</ul>

如果上面的链接在目标 URL 中（并且是目标 URL 的开始），则保存以突出显示它

（换句话说，您的链接就像您的导航一样嵌套）。如果没有，您可能可以同时使用而不使用链接或哈希，并传递一个伪 get 变量，然后使用 javascript 将其解析出来（再次在页面加载时）。

【讨论】：

【解决方案2】：

您需要将 url 匹配逻辑更改为基于正则表达式的逻辑，您可以在其中检查 url 的第一部分是否与此“类别”的预期序列匹配。这当然是假设类别中的每个页面都经过组织，以便 url 指示它所在的“类别”：

ex.   http://www.mysite.com/cars/priceguide.html
      http://www.mysite.com/cars/listings.html
      http://www.mysite.com/buses/priceguide.html

在上面的示例中，前两个链接属于“汽车”类别，最后一个链接属于“公共汽车”类别。

【讨论】：

【解决方案3】：

使用正则表达式，您可以评估相关片段的 URL。不过，这取决于您的 URL 方案；例如，如果您的网站使用如下 URL：

www.mysite.com/products
www.mysite.com/products/widget
www.mysite.com/products/wodget

您可以提取第一级目录 (www.mysite.com/products) 并将其用作您的活动链接参考。

【讨论】：