javascript - 页面重新加载后，菜单 Activity 状态保持在单击的链接上

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

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

当我单击product2时，右侧的表将在url字段中填充数据库，这将刷新页面。如何保持点击的链接处于活动状态？

最佳答案

以下应该工作：

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

在location.search中，您将找到URL后面的查询字符串。

decodeURIComponent将对您的网址进行解码，从而避免例如%20表示空白。

$('a[href="' + qs + '"]')选择a -tag，该标签具有与您的查询字符串相对应的href属性。

但我建议从"中的url参数中删除多余的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()