如何更改导航菜单上当前页面链接的颜色 [英] How do I change the colour of the current page link on a navigation menu

问题描述

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

I seem to not be able to change the colour of the current page I am on to a permanent colour after you get to the page.

导航链接会更改颜色，因为单击后该链接处于活动状态，但是一旦到达页面，该链接就不会保持该颜色.它返回到整个导航菜单的颜色.

The navigation link changes colour because the link is active when clicked but doesn't stay that colour once I get to the page. It returns to the colour of the whole navigation menu.

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

推荐答案

[已编辑]
你好，
为了做到这一点并使之保持简单，您需要在所浏览的每个页面上手动进行更改.在首页(Index.html)上，您需要向列表项添加ID:

Hello,
To be able to do that and keep this simple, you need to change it manually on each page you are on. On your first page (Index.html) you need to add an id to your list items:

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

或将其放在索引"页面的CSS中:

or put this in your Index page's css:

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

在每个页面上执行此操作，您就可以开始了！
希望我的回答对您有所帮助！

Do this on every page and you'll be good to go !
I hope my answer helped you !

这篇关于如何更改导航菜单上当前页面链接的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！