Как изменить цвет ссылки на текущую страницу в меню навигации

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

Вы можете использовать это 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>

Answer 2

Если вы не хотите присвоить каждому элементу в вашем списке класс или идентификатор, вы можете сделать это с помощью скрипта - вы можете поместить его во внешний скрипт и включить его

Изменить

От

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

[EDITED]
Здравствуйте,
Чтобы иметь возможность сделать это и не усложнять, вам нужно изменить его вручную на каждой странице, на которой вы находитесь. На вашей первой странице (Index. html) вам нужно добавить идентификатор к элементам вашего списка:

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

* 1010 своей индексной страницы. * Делайте это на каждой странице , и вам будет хорошо go!
Надеюсь, мой ответ вам помог!

Answer 4

, если вы делаете это в чистом html, вам нужно будет go перейти к навигационной ссылке на каждой странице, соответствующей странице, на которой вы находитесь, и создать css id для этой страницы и добавить его в ссылка Например, в вашем css:

#currPage {
  color:red;
}

(предполагается, что вы используете страницу css, в противном случае вам нужно добавить это на каждую страницу в разделе заголовка)

на главной странице html

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