Question

我的菜单有问题。我希望活动状态保留在最后点击的链接上。

<ul id="nav">
    <li class="active"><a href="?field1="2"&field2="test">products </a></li>
    <li><a href="?field1="3"&field2="test2">products2 </a></li>
</ul>

当我点击products2时，右侧的表将填充url中字段的数据，这将刷新页面。如何让点击链接保持活动类？

Answer 1

以下内容应该有效：

var qs = decodeURIComponent(location.search);
$('a[href="' + qs + '"]').parents('li').addClass('active');

在location.search中，您会找到与您的网址相对应的查询字符串。

decodeURIComponent会解码您的网址，以避免例如<空白的%20。

$('a[href="' + qs + '"]')选择a -tag，其中href - 属性对应于您的查询字符串。

但我建议您从"内的网址参数中删除额外的href：

<ul id="nav">
    <li class="active"><a href="?field1=2&field2=test">products </a></li>
    <li><a href="?field1=3&field2=test2">products2 </a></li>
</ul>

如果您无法删除引号，则必须转义它们才能使属性选择器生效。

<强>参考

location.search

decodeURIComponent

jQuery attribute selector

.parents()

.addClass()

Answer 2

您可以检查网址，然后将该类应用于相关元素。这可以在服务器端或客户端完成（我看到你用客户端技术标记它）

喜欢这个

'\0'

显然，值和标签应该在某些方面构建，但是你得到了要点。

Answer 3

使用jQuery，您可以针对您的场景尝试此操作。

   var currentPath="?"+window.location.href.split("?")[1];
   $("a[href='"+currentPath+"']").parent().addClass("active");

Answer 4

简单但难看的解决方案是在product2页面上添加代码以手动突出显示链接。

如果问题出在所有链接上，并且将来会有n个链接可用，那么您的代码应该更加结构化。在这种情况下，您可以在常用的js文件中放置用于处理此类常见工作（突出显示侧栏上的链接）的公共代码。而不是放在所有页面上。

页面重新加载后，菜单活动状态仍保留在单击的链接上

4 个答案: