Question

好吧，所以我是html和css的超级初学者，我一点也不了解javascript。我正在创建一个网站作为学校项目，我从w3schools教程制作了水平导航栏，我想做什么是当我按下其中一个按钮保持颜色时，不仅仅是改变颜色1秒钟，因为它们是“活动的”。我的代码可能完全混乱，但我确实需要帮助。另外，我还有3个子页面与此页面相关，我希望它们也保持彩色。

我要实现的目标正是这样的：How can I add class on active li with JavaScript code 但这对我不起作用，也许我需要在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;
}

我希望该页面上的即时消息链接保持橙色。

Answer 1

您可以使用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/

Answer 2

好，所以我做了一些测试，还找到了一个解决方案。我用标识符代替类。因此，在我的主页上，将id =“ active”放在第一个链接上，在第二页上将id =“ active”放在第二个链接等上，然后仅添加#active {background-color：orange; }，它的工作方式正是我想要的。

Answer 3

您可以通过在活动链接上的html <a>标签上添加一个类，然后在CSS中为该活动类设置样式来实现此目的。参见下文：

HTML

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

CSS

.active {
    color: orange;
}

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

3 个答案: