css tab页选中字体变蓝

CSS Tab页选中字体变蓝

.tab{
    display: flex;
}
.tab-item{
    /*未选中时样式*/
    color: #555;
}
.tab-item.active{
    /*选中时样式*/
    color: blue;
}

在使用 CSS 实现 Tab 页中选中字体变蓝的效果时，我们可以通过控制样式类的变化来实现。

首先，我们需要一个包含 Tab 页的容器，即 class 名称为 .tab 的元素。

然后，每个 Tab 页选项卡元素的 class 名称为 .tab-item，我们可以通过该 class 来控制选项卡的未选中和选中状态。

当选项卡处于未选中状态时，字体的颜色是灰色；当选项卡处于选中状态时，字体的颜色是蓝色。我们可以通过设置 .tab-item 和 .tab-item.active 两个 class 的样式，来实现选项卡字体颜色的变化。