Question

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

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

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

Answer 1

如果使用纯HTML格式，则需要转到与您所在页面相对应的每个页面中的nav链接，并为该页面创建一个css id并将其添加到链接中。您的CSS：

#currPage {
  color:red;
}

（这是假设您使用的是CSS页面，如果没有，则需要将此页面添加到头部的每个页面中）

主页html

<div id="navbar-horizontal-2">
<ul>
  <li><a href="index.html" id="currpage" >Home</a></li>

Answer 2

如果您不想为列表中的每个项目都指定一个类或ID，则可以使用脚本来执行此操作-您可以将其放在外部脚本中并包含它

更改

const page = "/site/about.html".split("/").pop();

到

const page = location.href.split("/").pop()

经过测试

window.addEventListener("load",function() {
  const page = "/site/about.html".split("/").pop(); // location.href.split("/").pop()
  [...document.querySelectorAll("#navbar-horizontal-2 > ul > li > a")].forEach(link => {
    if (link.href.endsWith(page)) {
      link.classList.add("active")
    }  
  })  
})

#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);
}

#navbar-horizontal-2 .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>

Answer 3

[编辑]
你好，
为了做到这一点并使之保持简单，您需要在所浏览的每个页面上手动进行更改。在首页（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);
}

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

Answer 4

您可以使用我为自己写的这个jquery。出于演示目的，我将about.html更改为js，因为此代码段链接具有https://stacksnippets.net/js链接。

这将检查您的当前位置，将其拆分以获取/之后的最后一个值，然后匹配包含/之后的值的菜单链接并设置其样式。在下面的演示中，具有js值的链接被设置样式。

var loc= window.location.href;
    console.log(loc);

values=loc.split('/');
link=values[values.length-1];
//console.log(link);

    $('#navbar-horizontal-2 ul li').find('a').each(function() {
    //console.log($(this).attr('href').indexOf(link) >= 0);
    if ($(this).attr('href').indexOf(link) >= 0) {
      //console.log($(this));
       $(this).attr("style", "background-color:rgb(201, 173, 146); color:red")
      //console.log("test");
    }
});

#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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar-horizontal-2">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="js">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>

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

4 个答案: