时间戳

首页 > 解决方案 > 如何更改导航菜单上当前页面链接的颜色

html - 如何更改导航菜单上当前页面链接的颜色

问题描述

进入页面后，我似乎无法将当前页面的颜色更改为永久颜色。

导航链接会更改颜色，因为单击该链接时该链接处于活动状态，但一旦我进入该页面就不会保持该颜色。它返回整个导航菜单的颜色。

#navbar-horizontal-2 ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  border: 1px solid rgb(201, 173, 146);
  background-color: linen;
}

#navbar-horizontal-2 li {
  float: left;
}

#navbar-horizontal-2 li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: black;
}

#navbar-horizontal-2 li a:hover:not(.active) {
  background-color: rgb(201, 173, 146);
}

#navbar-horizontal-2 li a:hover:active {
  background-color: rgb(201, 173, 146);
}
<div id="navbar-horizontal-2">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="models.html">Models</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

标签： htmlcss

解决方案

[编辑]
您好，
为了能够做到这一点并保持简单，您需要在您所在的每个页面上手动更改它。在您的第一页 (Index.html) 上，您需要向列表项添加一个 id：

<style>
#home {
    background-color:  rgb(201, 173, 146);
}
</style>
<li><a href="index.html" id="home">Home</a></li>

或将其放入您的索引页面的 css 中：

#home {
    background-color:  rgb(201, 173, 146);
}

在每一页上都这样做，你会很高兴的！
希望我的回答对你有帮助！

推荐阅读