我复制了以下代码 w3schools.com 并将其添加到我网站上的所有页面。导航工作正常,但菜单中活动链接的背景颜色不会改变。
我该如何解决这个问题?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #7A991A;
}

<ul>
<li>
<a href="/home.php">Home</a>
</li>
<li>
<a href="/news.php">News</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/about.php">About</a>
</li>
</ul>
&#13;
答案 0 :(得分:1)
您需要在活动页面上添加CSS类。我在这里添加了class="active"
更改CSS如下
a:hover,
a:active,
a.active {
background-color: #7A991A;
}
在 home.php 上更改导航代码,如下所示。
<ul>
<li>
<a href="/home.php" class="active">Home</a>
</li>
<li>
<a href="/news.php">News</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/about.php">About</a>
</li>
</ul>
在 news.php 上进行如下更改,同样适用于其他网页
<ul>
<li>
<a href="/home.php">Home</a>
</li>
<li>
<a href="/news.php" class="active">News</a>
</li>
<li>
<a href="/contact.php">Contact</a>
</li>
<li>
<a href="/about.php">About</a>
</li>
</ul>