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

提问者：小点点

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

我似乎不能改变当前页面的颜色，我在一个永久的颜色后，你得到的页面。

导航链接会改变颜色，因为点击时链接是活动的，但一旦我到达页面，它就不会保持原来的颜色。它将返回整个导航菜单的颜色。

null

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

null

共3个答案

匿名用户

如果您是在纯html中执行此操作，则需要转到与您所在页面相对应的每个页面中的nav链接，并为该页面创建css id，然后将其添加到链接中（例如，在您的css:

#currPage {
  color:red;
}

（这是假设您正在使用css页面，如果不是，那么您需要将此添加到每个页面的head部分）

在主页html中

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

匿名用户

如果您不想给列表中的每个项目一个类或ID，那么您可以使用脚本来实现这一点-您可以将其放在外部脚本中并将其包括在内

更改

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

至

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

测试时

null

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>

匿名用户

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

这将检查您的当前位置，将其拆分以获取/之后的最后一个值，然后匹配包含/之后的值的菜单链接并对其进行样式化。在下面的演示中，使用js值的链接已经样式化。

null

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>