Question

我正在尝试实施主动/当前导航链接，以便用户在某个导航链接上处于活动状态时，它应该是绿色的，表明他们当前在该页面上。我的问题是它没有做任何事情。这是我的小提琴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;
}

Answer 1

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

Answer 2

<!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 个答案: