javascript - 页面重新加载后，菜单事件状态仍保留在单击的链接上

我的菜单出现问题。我希望事件状态保留在上次单击的链接上。

<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 中字段的数据库，这将刷新页面。我怎样才能保持点击的链接具有事件类？

最佳答案

以下内容应该有效:

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

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

decodeURIComponent 将解码您的 URL，从而避免例如%20 表示空格。

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

但我建议从 href 内的 url 参数中删除额外的 ":

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

关于javascript - 页面重新加载后，菜单事件状态仍保留在单击的链接上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33408159/