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

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

我正试图实现的是： 但它对我不起作用，也许我需要更改javascrip中的某些内容，因为我的类名为“navbar”

我尝试了本主题中有关堆栈溢出的几个解决方案，但这些都不适用于我：\

HTML:

---

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

你可以通过在链接上的html

标记上添加一个类来实现这一点，然后在CSS中设置活动类的样式。见下文：

HTML

---

您可以使用jquery做一些事情，比如添加一个事件监听器来更改html元素的css

const changeColor = () => {
    $('ul > li > a').css('background-color', 'inherit')
    $(event.target).css("background-color", "red")
}

$('ul > li > a').on('click', changeColor)

---

好的，所以我做了一些测试，找到了一个解决方案。我戴上识别器而不是上课。因此，在我的主页上，我将id=“active”放在第一个链接上，在第二个页面上放在第二个链接上，等等。然后只添加了#active{background color:orange；}，它正是我想要的工作方式。

“我已经尝试了几个关于堆栈溢出的解决方案，但这些都不适合我。”-然后请至少参考您尝试过的建议-链接问题，或展示您尝试过的内容。否则，这里没有人知道他们是否会引用您已经尝试过的东西，这是毫无意义的。我从和我有相同问题的人那里尝试了一些随机javascript代码，我真的不知道他们在做什么，也不知道他们到底是哪一个。“我希望当我在那个页面上时链接保持橙色。”-然后，您需要使该页面中的链接以某种方式与其他链接区分开来-例如，当用户位于该特定页面上时，向其添加一个类。f、 e.展示了一种方法。如果你不能让它这样工作，那么你需要给我们一个适当的问题描述。所以如果我理解得很好，例如，我应该在所有标签的第一页上添加“tree”类，然后在所有标签的第二页上添加“dog”类等等？这与w3schools上的完全相同，但对我来说似乎不起作用。然后你做了一些错误的事情，但没有更多的上下文和代码，我们看不出什么是错误的。你的其他样式正在应用吗？我还有一个无序列表，但它有自己的类，只有字体大小和字体系列，所以我认为它不会真的出错？我的问题是你应用的其他样式是否正在应用于其他列表？如果没有，则表明您没有在HTML文档中链接样式表。请看这里：CSS文档确实是链接的，我粘贴的这些样式是列表中唯一的样式（.navbar类）。我还有一些表示其他内容的样式，例如文本，它们可以正常工作。这并不是我想要的工作方式。如果我先按tab键，然后按second键，然后按second键，再按second键，它们都将是橙色的？我不仅仅想让活动选项卡改变颜色。我还添加了一个黑客补丁来实现您描述的行为。应该更近一点

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

<ul class="navbar">
      <li><a class="active" 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>

.active {
    color: orange;
}

const changeColor = () => {
    $('ul > li > a').css('background-color', 'inherit')
    $(event.target).css("background-color", "red")
}

$('ul > li > a').on('click', changeColor)