html网页导航栏被点击变色
时间: 2023-08-14 11:39:13 浏览: 315
你可以通过CSS来实现导航栏被点击后变色的效果。具体操作如下:
1. 给导航栏的每个链接添加一个类名(比如说叫做 "active")。
2. 在CSS中定义该类名的样式。
```CSS
.active {
color: red; /* 文字颜色变为红色 */
background-color: yellow; /* 背景颜色变为黄色 */
}
```
3. 使用JavaScript来实现点击链接时给该链接添加 "active" 类名。
```JavaScript
var links = document.querySelectorAll(".nav-link"); // 获取所有导航栏链接元素
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
// 先移除所有链接的 "active" 类名
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
// 给当前点击的链接添加 "active" 类名
this.className += " active";
});
}
```
这样就可以实现导航栏链接被点击后变色的效果了。
相关问题
html网页导航栏被点击变色,点击别的后原先的变回之前的颜色
你可以通过JavaScript来实现点击导航栏链接时变色的效果,并且点击别的链接后原先的链接恢复之前的颜色。具体操作如下:
1. 在CSS中定义导航栏链接的样式。
```CSS
.nav-link {
color: black; /* 文字颜色 */
background-color: white; /* 背景颜色 */
}
```
2. 在CSS中定义被点击链接的样式。
```CSS
.nav-link.active {
color: red; /* 文字颜色变为红色 */
background-color: yellow; /* 背景颜色变为黄色 */
}
```
3. 使用JavaScript来实现点击链接时给该链接添加 "active" 类名,并移除其他链接的 "active" 类名。
```JavaScript
var links = document.querySelectorAll(".nav-link"); // 获取所有导航栏链接元素
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
// 首先移除所有链接的 "active" 类名
for (var j = 0; j < links.length; j++) {
links[j].classList.remove("active");
}
// 给当前点击的链接添加 "active" 类名
this.classList.add("active");
});
}
```
这样就可以实现点击导航栏链接时变色的效果,并且点击别的链接后原先的链接恢复之前的颜色了。
html导航栏点击后变色
您可以使用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类,从而实现变色的效果。