Tabs选中状态样式切换时没变化怎么办？

欧阳文娟提问于 2026-02-10 20:56:25 阅读 2,084

组件

在写Tabs组件时，给选中的标签加了.active类的背景色，但点击切换时样式没变化。我试过用JS动态切换类名，控制台显示类名确实变掉了，但样式就是没跟着变…

我的CSS是这样写的：


.tabs__item {
  background: #eee;
  padding: 10px 20px;
  cursor: pointer;
}

.tabs__item.active {
  background: #007bff;
  color: white;
}

连!important都加了还是不行，是不是类名优先级不够？或者我哪里写漏了？

我来解答赞 6 收藏

反馈

1 条解答

端木雅茹 Lv1

检查是否多个元素同时被添加了.active类，移除其他元素的.active再试。
JS要先清除所有active类，再给当前元素添加：

document.querySelectorAll('.tabs__item').forEach(tab => {

  tab.classList.remove('active');

});

event.target.classList.add('active');

就这样。

2026-02-10 21:00