使用css实现tab切换不用js

tab切换一直是页面的主要结构。最近在写一个Vuespa项目。请问是否可以不用href和js做控件，实现纯css和html的tab切换。标签页交换的原理无非就是利用标签的display属性来切换显示和不显示。利用了这一点之后，我们输入中的单选按钮就派上用场了。首先将input和对应的label设置为tab的导航。tab1然后使用input的checkedselector来关联要切换的页面已打开。当然，我们需要在label标签后面跟上相应的主要内容标签，使用兄弟选择器来控制它的display属性。为了让几个页面保持在同一个位置，我们当然要统一它们的位置。这里直接使用绝对定位的方法。完成的css代码如下input[type='radio']{display:none;}.tab标签{显示：块；游标：指针；位置：绝对；宽度：60px；高度：30px；行高：30px；文本对齐：居中；边框：1px实心#eee；}.label-1{左：0；顶部：0；}.label-2{左：60px；顶部：0；}input[type='radio']:checked~div[class^='mod']{display:block;}input[type='radio']:checked~label{背景：橙色；}[class^='mod']{位置：绝对；顶部：40px；左：20px；显示：无；}html代码