Javascript jQuery如何将类添加到<；李>；或<；a>；并保持在下一页加载或刷新？

我有

元素，包含

元素。当用户单击

时，它会将类“active”设置为

，并加载新链接。但当加载新链接时，类“active”将消失。当新页面出现时，如何在同一

上仍然有“活动”类

---

谢谢

基本上，您需要在页面更改之间保持状态。您可以通过以下两种方式之一实现：

会话参数：使用cookie或本地存储（HTML5）

请求参数：添加URL参数并通过jquery读取（示例：）

---

最快最简单的方法就是把它放在饼干里。下面是如何创建/读取cookie的示例代码：

在您的情况下，您需要为每个

或

添加一个ID或一些唯一属性，以便在重新加载页面时，脚本知道应该激活哪个

，例如：

HTML：

<li><a href="abc.html" data-unique-attr="123">link 1</a></li>
<li><a href="def.html" data-unique-attr="456">link 2</a></li>
<li><a href="ghi.html" data-unique-attr="789">link 3</a></li>

// on page load: read the cookie and activate the link
$(function() {
    var activeAnchor = readCookie('activeAnchor');
    if (activeAnchor) {
        $('li a[data-unique-attr="' + activeAnchor + '"]').addClass('active');
    }
});

// on click: set the cookie
$('li a').click(function() {
    $(this).addClass('active');
    createCookie('activeAnchor', $(this).data('uniqueAttr'));
});

---

如果所讨论的链接与页面的url相匹配，您可以将代码基于该url而不是cookie或其他内容

$(function() { //The document is ready...
    $('li a[href="' + window.location.href + '"]').addClass('active');
});

---

请注意，在此表单中，它仅在链接为绝对链接时有效，即从

http://

开始。如果链接是相对的，您可能需要对其进行一些调整。

您必须使用在页面之间持久化的内容，例如cookie或localstorage。在页面加载时，您必须检查持久化数据，以查看需要对页面进行哪些更改才能将其恢复到以前的位置。您可以使用Cookie或localstorage…甚至获取属性