Question

我不知道这是否可行但是现在我有一个左侧导航栏，里面有一堆链接。我正在添加一个活动类（在状态上），用户通过检查它指向的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 nav时删除活动状态。希望这是有道理的，但有没有办法“保持”最初设置活动状态...除非人们点击侧栏导航ul的另一个元素？

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>

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

如果上述链接位于目标网址（并且是其开头），则保存以突出显示

（换句话说，您的链接就像导航一样嵌套）。如果没有，你可能可以通过两者而不是使用链接或散列并传递伪获取变量，然后使用javascript解析它（再次，在页面加载时）。

Answer 2

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

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

在上面的示例中，前两个链接位于“cars”类别中，最后一个链接位于“bus”类别中。

Answer 3

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

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

您可以提取第一个目录级别（www.mysite.com/products）并将其用作活动链接引用。

jQuery：添加活动的类/状态并保持它！

3 个答案: