Javascript 如何持久保持导航菜单链接的样式？

我的导航菜单中有四项

<nav>
 <ul >
  <li><a href="/a.html">ITEM A</a></li>
  <li><a href="/b.html">ITEM B</a></li>
  <li><a href="/c.html">ITEM C</a></li>
 </ul>
</nav>

悬停或单击这些项目中的任何一项都会更改其颜色。但是页面刷新后颜色就消失了。如果用户单击

b.html

，我希望在重新加载页面时菜单项b具有不同的颜色。如何实现这一点

我的问题说清楚了吗

---

谢谢。

您需要使用链接的伪类来创建不同的css，如悬停、活动和访问

e、 g

---

您需要使用链接的伪类来拥有不同的css，比如，hover、active和visted

e、 g

---

我能想到的最简单的基于jQuery的答案是检索

href

属性值，并测试当前页面的URL是否以该属性值结尾：

// getting the current location:
var url = document.location.href;

// iterating over each <a> element using filter(), using a
// more specific selector will reduce the work undertaken:
$('a').filter(function(i, a) {
    // i: the index of the current <a> element within the
    //    jQuery collection;
    // a: the current <a> DOM node.

    // String.prototype.endsWith() returns a Boolean, true
    // if the supplied string (url) ends with the supplied
    // argument (the attribute-value of the 'href'
    // attribute of the current <a> element):
    return url.endsWith( a.getAttribute('href') );

// we add the 'activeClass' class-name to those elements
// retained in the collection, to provide a styling hook:
}).addClass('activeClass');

或者，在纯JavaScript中：

var aElements = Array.from(document.querySelectorAll('a')),
// or, in the event that ES6 Array.from() is unavailable:
// var aElements = Array.prototype.slice.call(document.querySelectorAll('a'), 0),
    url = document.location.href;

aElements.filter(Function (currentAnchor) {
    return currentAnchor.href == url;
}).forEach(function (currentAnchor) {
    currentAnchor.classList.add('activeClass');
});

显然，上述所有方法都需要在CSS中定义一个类来设置找到的链接的样式，例如——但显然要根据您自己的品味/审美来调整——如下所示：

a:active,
a.activeClass {
    color: #f90;
    text-decoration: underline;
}

值得注意的是，尽管有点乐观，但在未来的某个时候，

：local link

的伪类可能会设计一个

参考资料：


CSS:



JavaScript:









jQuery：




我能想到的最简单的基于jQuery的答案是检索
href
属性值，并测试当前页面的URL是否以该属性值结尾：

// getting the current location:
var url = document.location.href;

// iterating over each <a> element using filter(), using a
// more specific selector will reduce the work undertaken:
$('a').filter(function(i, a) {
    // i: the index of the current <a> element within the
    //    jQuery collection;
    // a: the current <a> DOM node.

    // String.prototype.endsWith() returns a Boolean, true
    // if the supplied string (url) ends with the supplied
    // argument (the attribute-value of the 'href'
    // attribute of the current <a> element):
    return url.endsWith( a.getAttribute('href') );

// we add the 'activeClass' class-name to those elements
// retained in the collection, to provide a styling hook:
}).addClass('activeClass');

或者，在纯JavaScript中：

var aElements = Array.from(document.querySelectorAll('a')),
// or, in the event that ES6 Array.from() is unavailable:
// var aElements = Array.prototype.slice.call(document.querySelectorAll('a'), 0),
    url = document.location.href;

aElements.filter(Function (currentAnchor) {
    return currentAnchor.href == url;
}).forEach(function (currentAnchor) {
    currentAnchor.classList.add('activeClass');
});

显然，上述所有方法都需要在CSS中定义一个类来设置找到的链接的样式，例如——但显然要根据您自己的品味/审美来调整——如下所示：

a:active,
a.activeClass {
    color: #f90;
    text-decoration: underline;
}

值得注意的是，尽管有点乐观，但在未来的某个时候，
：local link
的伪类可能会设计一个

参考资料：


CSS:



JavaScript:









jQuery：




localStorage可以根据需要保存一些用户设置。但是您需要编写逻辑来存储和加载页面加载上的用户设置。这些设置不是特定于用户的。我希望颜色对每个人都是持久的，比如：活动选择器，但在重新加载页面后仍能工作。向该li添加类并设置样式。@SanJeetSingh:我的答案解决了您的问题吗？不，没有，但谢谢：）如果需要，localStorage可以保存一些用户设置。但是您需要编写逻辑来存储和加载页面加载上的用户设置。这些设置不是特定于用户的。我希望颜色对每个人来说都是持久的，比如：活动选择器，但在重新加载页面后仍在工作。向该li添加类并设置样式。@Sanjeethingh:我的答案解决了你的问题吗？不，没有，但谢谢：）@moped:Yahh，我只是给了他一个想法，他可以用伪类做什么，给他一个想法，他将根据自己的要求决定颜色……；）：P其他使用粉红色表示链接：D:D@moped：耶，我刚刚给了他一个想法，他可以用伪类做什么，给他一个想法，他会根据自己的要求决定颜色…；）：P其他我们使用粉色作为链接：D:D
href
属性可能在最后，也可能不在最后。因此，我将
endsWith
替换为
includes
，但它给了我一个错误
url.includes不是一个函数
indexOf
也不起作用。它给出了同样的错误。为了确保我使用了
console.log（url）
，它给了我
位置{hash:，search:，pathname:“pathname”，port:，hostname:“hostname”…}
它看起来不像字符串。也许这就是问题所在：）。它现在正在使用
includes
。但是我不得不使用
document.location.href
。谢谢你的回答：）它发生了。你的回答可能是我从这里收到的最详细的回答我的目标是取悦！：）
href
属性可能在最后，也可能不在最后。因此，我将
endsWith
替换为
includes
，但它给了我一个错误
url.includes不是一个函数
indexOf
也不起作用。它给出了同样的错误。为了确保我使用了
console.log（url）
，它给了我
位置{hash:，search:，pathname:“pathname”，port:，hostname:“hostname”…}
它看起来不像字符串。也许这就是问题所在：）。它现在正在使用
includes
。但是我不得不使用
document.location.href
。谢谢你的回答：）它发生了。你的回答可能是我从这里收到的最详细的回答我的目标是取悦！：）