活动/当前导航链接不起作用答案

【问题标题】：Active/Current Navigation Link not working活动/当前导航链接不起作用
【发布时间】：2018-02-21 13:49:00
【问题描述】：

我正在尝试实现活动/当前导航链接，以便用户在某个导航链接上处于活动状态，它应该是绿色的，表明他们当前在该页面上。我的问题是它什么也没做。这是我的小提琴https://jsfiddle.net/n83qwbpf/1/，这是我从中获取示例的 w3 学校页面，我从中复制但无法正常工作。https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active

CSS

 <!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

【问题讨论】：

标签： css

【解决方案1】：

<!DOCTYPE html>

<html>
    <head>
        <title>Ryder Practice</title>
        <link rel="stylesheet" type="text/css" href="/inc/styles/styles.css">
    </head>
    <body>

        <ul class="menuBar">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
    </body>
</html>


<!-- Stylesheet -->
body{
    background: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}

li .active {
    background-color: #4CAF50;
}

div.menuBar li.active a { color: #FF0000; } 

li.active { background-color: red; }

【讨论】：

【解决方案2】：

您忘记在菜单上添加活动课程。

【讨论】：