sidebar组件 js点击item切换颜色

原生JS语法

 		<div class="sidebar">
          <div class="item" id="active">
            <i class="bx bx-home-alt-2"></i>
            <a href="#">Overview</a>
          </div>
          <div class="item">
            <i class="bx bx-grid-alt"></i>
            <a href="#">Course</a>
          </div>
          <div class="item">
            <i class="bx bx-folder"></i>
            <a href="#">Resources</a>
          </div>
          <div class="item">
            <i class="bx bx-message-square-dots"></i>
            <a href="#">Message</a>
          </div>
          <div class="item">
            <i class="bx bx-cog"></i>
            <a href="#">Setting</a>
          </div>
      	 </div>

点击对应的item，实现高亮

const sidebarItems = document.querySelector('#active')
// 遍历所有节点对象组
sidebarItems.forEach(function (item) {
  // 每个对象绑定 click 事件
  item.addEventListener('click', function () {
    // 获得绑定 id 属性的对象 
    var selectedItem = document.querySelector('#active')
    // 当点击对应的对象，没有active id属性
    if(selectedItem !== null) {
      // 去除所有对象上的id属性
      selectedItem.removeAttribute('id')
    }
    // this指向当前点击的对象，然后添加id属性
    this.setAttribute('id', 'active')
  })
})