JS实现ul li点击变背景颜色,点击别处还原背景色

JS实现ul li点击变背景颜色,点击别处还原背景色

• 效果
• js部分
• html部分
• css部分

效果

只有被点击的li是深蓝色

js部分

//项目列表
var changebgcolor = function(){
//获取整个div
var box = document.getElementById("box2")
//获取所有的li
var array = box.getElementsByTagName("li")
console.log(array)
//遍历所有li
for (let i = 0; i < array.length; i++) {
console.log(array[i])
//点击触发click事件
array[i].addEventListener('click',function(event){
var self = event.target
self.classList.add('active')
console.log(i)
//其他li背景颜色还原
for (let j = 0; j < array.length; j++) {
console.log(j)
if(j != i){
array[j].classList.remove('active')
}
}
})
}

}

html部分

<div id="box2">
<ul>
<li class="lib active" >
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-xuehua"></use>
</svg>
旅游资讯
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-lazhu"></use>
</svg>
主题活动
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-lingdang"></use>
</svg>
宜春月历
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-shengdanwa"></use>
</svg>
旅游景点
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-xueqiao"></use>
</svg>
主题行程
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-shoutao"></use>
</svg>玩转宜春
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-liwu"></use>
</svg>
旅游资讯
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-huahuan"></use>
</svg>
主题活动
</li>
<li class="lib">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengdanjie-jiangbingren"></use>
</svg>
宜春月历
</li>
</ul>
</div>

css部分

#box2{
float: left;
width: 20%;
height: 200px;
margin-left: 20px;
}
#box2 ul{
width: 400px;
height:200px;
list-style: circle;
}
#box2 ul li{
width: 75%;
height: 40px;
margin-bottom: 10px;
color: rgb(236, 247, 236);
line-height: 10px;
transition: 0.5s;
font-weight: bold;
font-family: 微软雅黑;
}
.active{
background-color: rgb(63, 81, 247) !important;
}
.lib{
background-color: rgb(136, 170, 241);
}

• 点赞
• 收藏
• 分享
• 文章举报