javascript - 事件导航按钮中的不同颜色

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 语句的简写版本。