Question

我已经阅读并尝试了大量版本的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>

Answer 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;
}

Javascript需要保持活动页面链接突出显示 - html5＆amp; CSS

1 个答案: