html导航栏点击后变色
时间: 2023-10-21 08:12:18 浏览: 71
可以通过CSS来实现导航栏点击后变色的效果。
一个简单的实现方法是为被点击的导航栏添加一个class,然后使用CSS设置该class的样式。
HTML代码示例:
```
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
```
CSS代码示例:
```
nav ul li a {
color: #000; /* 默认颜色 */
}
nav ul li a.active {
color: #f00; /* 点击后的颜色 */
}
```
JavaScript代码示例:
```
var navLinks = document.querySelectorAll('nav ul li a');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function() {
for (var j = 0; j < navLinks.length; j++) {
navLinks[j].classList.remove('active');
}
this.classList.add('active');
});
}
```
在JavaScript中,我们为每个导航链接添加了一个点击事件监听器。当一个链接被点击时,我们首先移除所有导航链接的“active”类,然后为当前被点击的链接添加“active”类。这样就可以实现导航栏点击后变色的效果。