html+css+js实现列表选中变色(2)
2020-01-31 本文已影响0人
独步江雪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
CSS优先级
https://www.cnblogs.com/qilin-3611/p/7018706.html
*/
ul{
margin:0;
padding:0;
list-style:none ;
}
ul>li{
background-color:gray ;
}
ul>li:hover{
background-color:blue !important;
}
</style>
</head>
<body>
<ul id="item-list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ul>
<script>
//items = document.getElementById('item-list').getElementsByTagName('li');
//html元素没有forEach方法
//以下返回的为NodeList对象，有forEach方法
items = document.querySelectorAll('ul#item-list>li')
items.forEach(function(item){
item.onclick=function(){
items.forEach(function(item_){
item_.style.backgroundColor='gray';
})
item.style.backgroundColor='red';
}
})
</script>
</body>
</html>
