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

问题描述

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

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

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

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

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

标签： javascripthtmlcss

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

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

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

https://jsfiddle.net/z02ndowt/

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

问题描述

解决方案

推荐阅读