点击li更改对应的下边框颜色
时间: 2023-05-30 10:01:36 浏览: 103
这可以通过CSS实现。给每个li元素绑定一个click事件,当点击时,获取当前li元素的下一个兄弟元素,即下边框元素,然后修改它的CSS样式即可。
HTML代码:
```
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<div class="border"></div>
```
CSS代码:
```
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 10px;
cursor: pointer;
}
.border {
height: 2px;
background-color: gray;
margin-top: 10px;
}
```
JS代码:
```
var lis = document.getElementsByTagName("li");
var border = document.querySelector(".border");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
var nextSibling = this.nextElementSibling;
border.style.backgroundColor = nextSibling.style.color;
}
}
```
解释一下JS代码:
首先获取所有li元素和下边框元素,然后遍历li元素,给它们绑定一个click事件。当点击li元素时,获取它的下一个兄弟元素,即下边框元素,然后修改下边框元素的背景颜色为该li元素的字体颜色。这里假设每个li元素的字体颜色是不同的,所以可以根据字体颜色来设置下边框颜色。