活动导航按钮中的不同颜色

Question

当我在页面上时，我想更改菜单按钮的背景颜色

这是我的代码：

HTML

<ul>
  <li><a class="active" href="index.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>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

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

我知道我必须使用Javascript但是现在我没有代码在链接处于活动状态时更改类。

Answer 1

最好使用PHP。在每个页面上添加一个变量，其中包含分配给它的页面名称，例如

<?php $page = "News"; ?>

然后，您可以添加条件语句，将有效类添加到与您正在查看的页面相关的导航链接中。

<ul>
  <li><a <?php echo ($page == "Home") ? "class='active'" : ""; ?> href="index.php">Home</a></li>
  <li><a <?php echo ($page == "News") ? "class='active'" : ""; ?> href="news.php">News</a></li>
  <li><a <?php echo ($page == "Contact") ? "class='active'" : ""; ?> href="contact.php">Contact</a></li>
  <li><a <?php echo ($page == "About") ? "class='active'" : ""; ?> href="about.php">About</a></li>
</ul>

如果你不认识PHP代码，它只是if语句的简写版本。

Answer 2

创建一个不同的css页面，然后将其链接到该页面，然后复制并粘贴所有内容。