Javascript 需要保持活动页面链接突出显示 - html5 & css答案

【问题标题】：Javascript needed to keep active page link highlighted - html5 & cssJavascript 需要保持活动页面链接突出显示 - html5 & css
【发布时间】：2014-05-02 22:42:05
【问题描述】：

我已经阅读并尝试了许多版本的 javascript，但我似乎无法让我的活动页面链接保持突出显示。请帮忙。 Java 脚本不是我的事。文档类型为 HTML5

下面是 CSS

nav a:link   {
    color: #FFFDEF;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}
nav a:visited   {
    color: #FFFDEF;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}
nav a:hover   {
    color: #F38000;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #101010;
}
nav a:active  {
    color: #F38000;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #101010;
}

下面是 HTML

<nav>
    <div id="mainmenu">
        <a href="../index.html">HOME</a>
        <a href="../beefmaster-breedinfo.html">BREED INFO</a>
        <a href="../aboutwo.html">ABOUT</a>
        <a href="../awards.html">AWARDS</a>
        <a href="../news.html">NEWS</a>
        <a href="../farmandcattlereferencelinks.html">LINKS</a>
        <a href="../blackbeefmastergeneticshowtoeffectivelybreedthem.html">TIPS</a>
    </div>
</nav>

【问题讨论】：

为什么需要使用Javascript？您的 CSS 可以很好地保持活动样式。

标签： javascript css hyperlink

【解决方案1】：

:active 仅适用于激活链接时（按下鼠标按钮时）。它可能在这方面起作用。也许您正在寻找一种方法来识别哪个链接与当前页面匹配并应用一些样式？

<body>
...
<script>
  Array.prototype.forEach.call(
     document.querySelectorAll("#mainmenu a[href]"), 
     function(t) { 
        var hr = t.href.split("/").pop();
        if (window.location.href.indexOf(hr) > -1)
            t.className = 'active';
        else
            t.className = '';
     }
  );
</script>
</body>

还有一个 CSS 类，例如：

nav a.active,
nav a:active  {
  color: #F38000;
  background-color: #101010;
}

【讨论】：

当元素是 ID 时为什么要querySelectorAll？ ID应该是唯一的。调用document.getElementById 会更快，您可以在forEach 的回调中使用this.href，而不是花哨的querySelectorAll。只是说。
它没有选择具有 ID 的元素。它正在选择所有包含 [href] 属性的 a 元素，这些属性是具有 ID 的元素的子元素。
var childNodes = (document.getElementBYId('mainmenu').childNodes).getElementsByTagName('a');
是的，这是 10 年前我们注定要采用的更繁琐的操作方式。 .. 现在让它过滤掉没有设置 href 的元素。
Malk 谢谢你的回答，我正在寻找我的链接在该页面上保持突出显示，以便访问者清楚他们在网站中的位置，因为会有多个菜单......我将您的 javascript 放在 body 标记的关闭之前，并将您提供的 css 添加到我的样式表中。结果是我所有的链接都保持突出显示......我对javascript一无所知......