html导航栏点击后变色
时间: 2023-07-20 18:32:02 浏览: 69
您可以使用CSS来实现导航栏点击后变色的效果。具体做法是,在导航栏的CSS样式中添加一个active类,然后在HTML中使用JavaScript来为被点击的导航栏元素添加该类。以下是一个示例代码:
CSS样式:
```
.nav-item {
color: black;
}
.nav-item.active {
color: red;
}
```
HTML代码:
```
<ul class="nav">
<li class="nav-item" onclick="setActive(this)">Home</li>
<li class="nav-item" onclick="setActive(this)">About</li>
<li class="nav-item" onclick="setActive(this)">Contact</li>
</ul>
```
JavaScript代码:
```
function setActive(elem) {
// 清除所有导航栏元素的active类
var navItems = document.querySelectorAll('.nav-item');
navItems.forEach(function(item) {
item.classList.remove('active');
});
// 为被点击的导航栏元素添加active类
elem.classList.add('active');
}
```
当用户点击某个导航栏元素时,该元素会被添加active类,从而实现变色的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)