如何使导航栏中的活动按钮更改颜色

Question

好的，所以我是 html 和 css 的超级初学者，我根本不知道 javascript。我正在创建一个小网站作为学校项目，我从 w3schools 教程制作了水平导航栏，我想做的是当我按下其中一个按钮以保持颜色，而不仅仅是改变颜色 1 秒，因为它们是“活动的”。我的代码可能很乱，但我真的需要帮助。此外，我还有 3 个子页面连接到这个子页面，我希望它们也保持彩色。

我想要实现的正是这样的：如何使用 JavaScript 代码在活动 li 上添加类 但它对我不起作用，也许我需要在 javascrip 中更改某些内容，因为我的类名为“导航栏”？

我已经从这个话题中尝试了几个关于堆栈溢出的解决方案，但这些都不适合我：\

HTML：

    <ul class="navbar">

    <li><a href="sajt.html">Pocetna</a></li>

    <li><a href="sajt2.html">Stranica 2</a></li>

    <li><a href="sajt3.html">Stranica 3</a></li>

    <li style="float: right;"><a href="sajt4.html">Kontakt</a></li>

    </ul>

CSS：

.navbar {

  list-style-type: none;

  position: sticky;

  top: 0;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}

.navbar li {

    float: left;

 }

 .navbar li a {

  display: block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-family: Arial;

}

.navbar li a:hover {

    background-color: #111;

}

当我在该页面上时，我希望链接保持橙色。

Answer 1

你可以用 jquery 做一些事情，比如添加一个事件监听器来改变 html 元素的 cssconst changeColor = () => {&nbsp; &nbsp; $('ul > li > a').css('background-color', 'inherit')&nbsp; &nbsp; $(event.target).css("background-color", "red")}$('ul > li > a').on('click', changeColor)https://jsfiddle.net/z02ndowt/

Answer 2

好的，所以我做了一些测试，并找到了解决方案。我把标识符放在而不是类上。所以在我的主页上，我将 id="active" 放在第一个链接上，在第二个链接上的第二页上等等。然后只添加了 #active { background-color: orange;&nbsp;并且它的工作方式正是我希望它工作的方式。

Answer 3

您可以通过<a>在活动链接上的 html标记上添加一个类，然后在 CSS 中设置活动类的样式来实现此目的。见下文：HTML<ul class="navbar">&nbsp; &nbsp; &nbsp; <li><a class="active" href="sajt.html">Pocetna</a></li>&nbsp; &nbsp; &nbsp; <li><a href="sajt2.html">Stranica 2</a></li>&nbsp; &nbsp; &nbsp; <li><a href="sajt3.html">Stranica 3</a></li>&nbsp; &nbsp; &nbsp; <li style="float: right;"><a href="sajt4.html">Kontakt</a></li>&nbsp;</ul>CSS.active {&nbsp; &nbsp; color: orange;}