怎样利用js点击目录中的无序列表中的li标签改变背景颜色 并且整个ul中只存在一个改变颜色的li

就像QQ音乐中左边的总目录。点击第一个li时改变颜色 后面再点击第二个li时改变背景颜色 第一个颜色恢复默认 本人小白 可能描述的不到位 求大佬哥哥们解答

<div>
          <li class="m-li" id="4" onclick='addColor(this.id)'>
            会议简介
          </li>
          <li class="m-li" id="5" onclick='addColor(this.id)'>
            会议议程
          </li>
          <li class="m-li" id="6" onclick='addColor(this.id)'>
            会议嘉宾
          </li>
        </div>

.personal {
    color: #3A99FF;
  }


function addColor(x)
  {
     let list=document.getElementsByTagName('li')
     for(let p=list.length;p--;){
          if(list[p].id!=x){
            list[p].classList.remove("personal");
            }
          else {
            /*点击的*/
            list[p].classList.add("personal");
          }
      }
  }

点击时，只给 挡前点击的加 类名，其它都移除

代码可能不完善，先讲下思路吧，大致就是给所有可点击的li元素绑定了点击事件，点击这些li时将所有li的样式重置成默认状态，并且给当前点击的li重新绑定选中样式


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <style>
        .nav {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav li {
            position: relative;

            height: 40px;
            padding: 0 10px;
            box-sizing: border-box;

            color: #333333;
            line-height: 40px;
            cursor: pointer;
        }

        .nav li:hover {
            color: #ffffff;
            background-color: #8ad2f3;
        }

        .nav li.selected {
            color: #ffffff;
            background-color: #8ad2f3;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="selected">喝当季草莓</li>
        <li>喝招牌葡萄</li>
        <li>喝鲜奶茶</li>
    </ul>

    <script>
        const navList = document.querySelectorAll(".nav li");

        navList.forEach(el => {
            el.addEventListener("click", () => {
                navList.forEach(el => {
                    el.classList.remove("selected")
                })
                el.classList.add("selected");
            })
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            li {
                list-style: none;
            }
            li:hover {
                background-color: #eee;
            }
            li.active {
                background-color: teal;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <script>
            var lis = document.getElementsByTagName('li')
            console.log(lis)
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function() {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].className = ''
                    }
                    this.className = 'active'
                }
            }
        </script>
    </body>
</html>

如果用vue写下图直接照抄就行了，其中liList是你要渲染的li标签的数据的列表，currentIndex表示当前所在数据下表，然后在style里写出active的样式就行，如果是原生就麻烦一下，但是原理一样

img