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

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>

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

Answer 1

以下应该工作：

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

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

decodeURIComponent将解码您的URL，因此避免了例如%20的空格。

$('a[href="' + qs + '"]')选择a具有-tag href对应到查询字符串-attribute。

但我建议从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属性选择器

。父母（）

.addClass（）

Answer 2

您可以检查url，然后将类应用于相关元素。 这可以在服务器端或客户端完成（我看到您使用客户端技术对其进行了标记）

像这样

//if url contains "field1=3" then add the class "selected" to element "tab2"
if (window.location.href.indexOf("field1=3") > -1) {
   $("#tab2").addClass("selected")
}

值和制表符显然应该以某种方式进行结构化，但是您可以理解要点。

Answer 3

使用jQuery，您可以针对自己的情况尝试此操作。

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

Answer 4

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

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