如何更改菜单栏中活动链接的背景颜色？

Question

我从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> 

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