css可以控制点击切换吗 |css 文本在中间

//HTML结构
<div class="tab"><ul class="tab-nav"><li>标签1</li><li>标签2</li><li>标签3</li></ul><div class="tab-con"><div>内容1</div><div>内容2</div><div>内容3</div></div></div>//CSS样式
.tab-con > div{
display:none;
}
.tab-con > div.active{
display:block;
}

以上是一个简单的tab切换效果的HTML结构和CSS样式，大家可以看到通过添加和删除类名来实现切换效果。那么怎么实现点击切换呢？

//CSS样式
.tab-nav li.active{
color: #f00;
}

大家只需要在点击标签的时候通过JavaScript来给当前标签添加一个active类名，并移除其他标签的active类名，同时将对应的内容块添加active类名，而其他内容块移除active类名，就能实现点击切换的效果了。CSS则负责控制active类名的样式。