html+css+js实现列表选中变色(2)

作者: 独步江雪 | 来源:发表于2020-01-31 21:12 被阅读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>