点击li元素时如何限制仅为当前点击项添加CSS类？

你的问题出在每次点击只给当前项添加active类，但没有移除其他已点击项的该类，导致所有点过的元素都保持红色样式。修改思路很简单：点击任意列表项时，先清除所有列表项的active类，再给当前点击的项添加该类。

修改后的JavaScript代码 #

const lis = document.querySelectorAll('.li');
lis.forEach((li) => {
    li.addEventListener("click", () => {
        // 先移除所有li的active类
        lis.forEach(item => item.classList.remove('active'));
        // 再给当前点击的li添加active类
        li.classList.add('active');
    })
})

可选优化：事件委托（更高效） #

如果列表项数量较多或后续会动态添加，推荐用事件委托绑定在父元素ul上，减少事件监听数量：

const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
    if (e.target.classList.contains('li')) {
        // 清除所有li的active类
        document.querySelectorAll('.li').forEach(item => item.classList.remove('active'));
        // 给点击的目标元素添加active类
        e.target.classList.add('active');
    }
});

原CSS和HTML代码无需改动 #

ul {
    list-style: none;
    display: flex;
    justify-content: center;
  }
  
  .li {
    margin: 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid black;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  
  .li:hover {
    background-color: #ccc;
  }
  .li.active{
    color: red;
  }

<body>
    <ul>
        <li class="li">1</li>
        <li class="li">3</li>
        <li class="li">4</li>
        <li class="li">5</li>
        <li class="li">6</li>
        <li class="li">7</li>
    </ul>
</body>

内容的提问来源于stack exchange，提问作者TAHER El Mehdi