Question

我的导航菜单中有四个项目

<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在页面重新加载时具有不同的颜色。我如何实现这一目标？

我的问题是否明确？

感谢。

Answer 1

你需要使用伪类链接来拥有不同的css，例如，悬停，活动，访问

e.g。

a {
  color:pink;
}
a:hover {
  color:red;
}

a:active {
  color:green;
}

a:visited {
  color:yellow;
}

Answer 2

我能想到的最简单的基于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');

或者，在（有可能）浏览器不支持String.prototype.endsWith()的事件中：

var url = document.location.href;
$('a').filter(function(i, a) {

    // retaining only those <a> elements whose
    // 'href' property (the absolute URL
    // derived from the <a> elements' href
    // attribute) is equal to the document location:
    return url == a.href;
}).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的伪类可能会将<a>元素设置为指向当前页面的样式，例如：

a:active,
a:local-link {
    color: #f90;
    text-decoration: underline;
}

虽然我注意到，在撰写本文时，这尚未实施，甚至<{3}}上的列出。

参考文献：

CSS：
- caniuse.com。
JavaScript的：
- :local-link pseudo-class。
- Array.from()。
- Array.prototype.filter()。
- Array.prototype.forEach()。
- Array.prototype.slice()。
- document.location。
- document.querySelectorAll()。
jQuery的：
- String.prototype.endsWith()。
- addClass()。

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

2 个答案: