如何用20行以内代码实现多段落点击切换激活类并更改样式

嘿，我帮你把代码彻底精简了，不管是JS还是CSS都砍掉了大量冗余，功能完全符合你的需求——点击任意<p>标签时，给它加上对应的xxx-active类，同时移除其他所有标签的-active类。

第一步：优化CSS（告别重复代码） #

原来的CSS每个类都写一遍基础样式和-active样式，完全没必要，直接合并统一处理：

/* 所有目标p标签的基础样式 */
.one, .two, .three, .four, .five, .six, .seven, .eight {
  color: rgb(11, 28, 47);
  background-color: rgb(255, 255, 255);
  cursor: pointer; /* 加个鼠标指针提示，提升交互体验 */
  margin: 5px 0; /* 可选：加个间距让布局更舒服 */
}

/* 所有-active类的统一样式 */
.one-active, .two-active, .three-active, .four-active,
.five-active, .six-active, .seven-active, .eight-active {
  color: rgb(255, 255, 255);
  background-color: rgb(11, 28, 47);
}

第二步：精简JS（仅8行代码搞定） #

不用一个个获取元素、写单独的事件函数，用批量选择和循环就能搞定：

// 一次性选中所有需要的p标签
const tabs = document.querySelectorAll('.one, .two, .three, .four, .five, .six, .seven, .eight');

// 给每个标签绑定点击事件
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有标签的-active类
    tabs.forEach(t => t.classList.remove(`${t.classList[0]}-active`));
    // 给当前点击的标签添加对应的-active类
    tab.classList.add(`${tab.classList[0]}-active`);
  });
});

HTML部分（无需修改，保持原样即可） #

<p class="one">COSA È</p>
<p class="two">COSA È</p>
<p class="three">COSA È</p>
<p class="four">COSA È</p>
<p class="five">COSA È</p>
<p class="six">COSA È</p>
<p class="seven">COSA È</p>
<p class="eight">COSA È</p>

补充说明 #

• 这里假设每个<p>标签只有一个基础类（比如one、two），如果有多个类，可以调整classList[0]为你需要的基础类名称，或者给所有目标标签加一个共同的类（比如tab-item），这样querySelectorAll可以直接写.tab-item，更简洁。
• 如果愿意统一用一个active类代替xxx-active，CSS会更简单，JS也可以改成移除active类再添加，这样扩展性更强。

内容的提问来源于stack exchange，提问作者drMAIN