![](/img/trans.png)
[英]How to Change the Color of Active class on click Navigation Bar bootstrap
[英]How to make active button in navigation bar change color
好的,所以我是 html 和 css 的超级初学者,我根本不知道 javascript。我正在创建一个小网站作为学校项目,我想做水平导航栏是什么时候从 i3 开始的按其中一个按钮保持颜色,而不仅仅是改变颜色 1 秒,因为它们是“活动的”。 我的代码可能完全混乱,但我真的需要帮助。 此外,我还有 3 个子页面连接到这个,我希望它们也保持彩色。
我想要实现的正是这个: 如何使用 JavaScript 代码在活动 li 上添加 class但它对我不起作用,也许我需要更改 javascrip 中的某些内容,因为我的 ZA2F2ED4F8EBC2CBB16DAB 被命名为 'navDC4AB'?
我已经从这个主题中尝试了几个关于堆栈溢出的解决方案,但这些都不适合我:\
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;
}
当我在该页面上时,我希望链接保持橙色。
你可以用 jquery 做一些事情,比如添加一个事件监听器来改变 html 元素的 css
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
好的,所以我做了一些测试并找到了解决方案。 我放了标识符而不是 class。 因此,在我的主页上,我将 id="active" 放在第一个链接上,在我的第二个页面上放在第二个链接上等等。然后只添加了 #active { background-color: orange; 它就像我想要的那样工作。
You can do this by adding a class onto your html <a>
tag on the link that is active and then just style the active class within your 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.