保持活动页面链接突出显示所需的Javascript-HTML5和CSS

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和CSS

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-02 23:06:11

保持活动页面链接突出显示所需的Javascript-HTML5和CSS

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-02 23:06:11

解决方案1
0 已采纳 2014-05-02 23:06:11