第零课

第一个版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         body{
            background-color: white;
            font-size: 24px;
         }
         #user-list{
            line-height: 1.5em
         }
          /* >子元素选择器*/
         #user-list > li:hover{ 
            background-color: rgba(0,0,0,0.3);
         }
    </style>
</head>
<body>
    <ul id="user-list">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    let list = document.querySelector('#user-list');
    let  items = document.querySelectorAll('#user-list > li');

    console.log(list);
    console.log(items);

    list.addEventListener('click', function (e) {
       
       if(e.target.tagName === "LI"){
        let item = e.target ; 
         items.forEach(function(item){
              item.style.background = "inherit";
              item.style.color  = "inherit";

              //??????? 先将所有的遍历设置默认样式
         })

         item.style.background = "black";
         item.style.color  = "white";

        }
    })

    /*
    代码的问题
       1、js直接控制的item的样式，如果后期修改样式，还要修改js代码
       
    */

</script>

第二个版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         body{
            background-color: white;
            font-size: 24px;
         }
         #user-list{
            line-height: 1.5em
         }
          /* >子元素选择器*/
         #user-list > li:hover{ 
            background-color: rgba(0,0,0,0.3);
         }
         /*同级也可以？？*/
         #user-list > li.active{
               background-color: black;
               color: white;
         }
    </style>
</head>
<body>
    <ul id="user-list">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    let list = document.querySelector('#user-list');
    let  items = list.querySelectorAll('li');
    list.addEventListener('click', function (e) {
       items.forEach(function(item){
              item.className = "";
         });
       if(e.target.tagName === "LI"){
         let item = e.target; 
         item.className = "active";
        }
    })

    /*
      项目中就基本满足要求，但是有更好的版本

    */
</script>

第三种办法是样式根本不需要写JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         body{
            background-color: white;
            font-size: 24px;
         }
         #user-list{
            line-height: 1.5em
         }
         #user-list input{
            display: none;
         }
         #user-list label{
            display: block;
         }
         .#user-list > li:hover{ 
            background-color: rgba(0,0,0,0.3);
         }
         #user-list  input:checked+label{
               background-color: black;
               color: white;
         }
    </style>
</head>
<body>
    <ul id="user-list">
        <li>
          <input type="radio" name="items" id="item0" value="张三">
          <label for="item0">张三</label>
        </li>
        <li>
          <input type="radio" name="items" id="item1" value="李四">
          <label for="item1">李四</label>
        </li>
        <li>
          <input type="radio" name="items" id="item2" value="王五">
          <label for="item2">王五</label>
        </li>
       <li>
          <input type="radio" name="items" id="item3" value="赵六">
          <label for="item3">赵六</label>
        </li>
    </ul>
</body>
</html>
<script type="text/javascript">
    let list = document.querySelector('#user-list');
    list.addEventListener('click', function (e) {
       if(e.target.tagName === "INPUT"){
         let checkedItem = list.querySelector('input:checked')
         console.log(checkedItem.value);
        }
    })
    /*
      这种方法就不用写js啦

    */
</script>

推荐阅读更多精彩内容