Html 如何使用css正确修复选项卡？

嗨，我正在尝试在我的项目中集成标签，这里css很好，但在点击第二个标签后，它是不可见的，而且按钮点击也不会发生

这是我尝试的代码：

---

任何答案都会很有帮助，谢谢。

对于您正在使用的“圆形”活动背景：ul上的伪元素之后。你为什么要那样做？是否要对其设置动画将其从一个活动li移动到另一个活动li

如果没有，只需在活动元素中添加“after”或添加背景即可

看看，让我知道你是不是在找

---

另外，选项卡工作正常，所以我不知道“按钮点击未发生”是什么意思。

您搞错了两个css属性，我将其更改为：

.tab-slider--trigger.active {
    color: #fff;
    background-color: #345F90; // add only when active
}
.tab-slider--trigger {
    background-color:white; // add when is not active white
}

.tab-slider--tabs:after {
    background: #345F90; // delete because is wrong
}

完整的css文件： .集装箱{ 宽度：75%； 保证金：3rem自动； } 氢{ 颜色：345F90； 字体大小：24px； 线高：1.25； 字体系列：Roboto Slab，衬线； 边缘顶部：20px； 边缘底部：20px； } .选项卡滑块导航{ 宽度：100%； 浮动：左； 边缘底部：20px； } .选项卡滑块选项卡{ 显示：块； 浮动：左； 保证金：0； 填充：0； 列表样式：无； 位置：相对位置； 边界半径：35px； 溢出：隐藏； 背景：fff； 高度：35px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } .选项卡滑块选项卡：之后{ 内容：； 宽度：50%； 身高：100%； 位置：绝对位置； 排名：0； 左：0； -webkit过渡：所有250ms易入易出； 过渡：所有250ms缓进缓出； 边界半径：35px； } .tab滑块选项卡。滑块：在{ 左：50%； } .选项卡滑块触发器{ 字体大小：12px； 线高：1； 字体大小：粗体； 颜色：345F90； 背景色：rgb255、255、255； 文本转换：大写； 文本对齐：居中； 填充：11px 20px； 位置：相对位置； z指数：2； 光标：指针； 显示：内联块； -webkit过渡：颜色250ms，易于输入输出； 过渡：颜色250ms，易于输入输出； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } .tab-slider-trigger.active{ 颜色：fff； 背景色：345F90； } .选项卡滑块体{ 边缘底部：20px；

---

}这很好，但在点击另一个标签后，它消失并重新出现，这不应该发生我之前得到的任何解决方案。它“消失”？你是说把颜色从蓝色改成白色需要一些时间？这就是应用于tab slider触发器的转换的效果是的，我不希望有任何解决方案。示例：是否删除应用于tab slider触发器的转换？：