html中怎么写一个简单的tab,教你两招用纯CSS写Tab切换

说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。

而今天所要分享的，是使用 0 行JS代码来实现Tab切换！

具体效果如下：

Tab切换

方法一：模拟单选框原理

关于模拟单选框，在我之前文章中有讲到，详情请戳→纯CSS模拟单选框和复选框

该方法大致原理如下：

当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。

具体如何实现呢？请耐心往下看...

1. HTML结构

• 选项一

  选项一内容

• 选项二

  选项二内容

• 选项三

  选项三内容

单选框想必大家都会用吧，type为radio，name属性值相同即可。

另外需要注意以下两点：

① label需要绑定input，方法