CSS的强大之处有的时候超乎想象，Tab切换确实需要用到一定的脚本才能实现。可以通过以下操作来实现。
工具/原料
CSS
方法/步骤
1、实现Tab切换的难点在于如何使用CSS接收到用户的点击糙怍牢莱事情并对相关的节点进行操作。即是：如何接收点击事件如何操作相关DOM两种不同的方法实现需求：方法一：:target伪类选蒉揉坟巡择器如何接收点击事件，这里第一种方法采用:target伪类接收。:target是CSS3新增的一个伪类，可用于选取当前活动的目标元素。当然URL末尾带有锚名称#，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(targetelement)。它需要一个id去匹配文档中的target。解释很难理解，看看实际的使用情况，假设HTML代码如下：
2、使用:target，需要HTML锚点，以及锚点对应的HTML片段。所以上面的结构要变成：
3、上面<ahref="#content1">中的锚点#content1就对应了列表1<divid="content1">。锚点2与之相同对应列表2。可以使用:target接受到点击事件，并操作对应的DOM了：
4、上面的CSS代码，缬方焱蜱一开始页面中的#content1与#content2都是隐藏的，当点吁炷纪顼击列表1触发href="#content1"时，页面的URL会发生变化：由www.example.com变成www.example.com#content1接下来会触发#content1:target{}这条CSS规则，#content1元素由display:none变成display:block，点击列表2亦是如此。如此即达到了Tab切换。当然除了content1content2的切换，li元素样式也要不断变化，需要在DOM结构布局的时候多留心，在#content1:target触发的时候可以同时去修改li的样式。在上面HTML的基础上，再修改一下，变成如下结构：
5、仔细对比一下与上面结构的异同，只是将ul从两个content上面挪到了下面，因为这里需要使用兄弟选择符~。E~F{cssRules}，CSS3兄弟选择符(E~F)，选择E元素后面的所有兄弟元素F。注意这里，最重要的一句话是E~F只能选择E元素之后的F元素，所以顺序就显得很重要了。在这样调换位置之后，通过兄弟选择符~可以操作整个.nav的样式。
6、上面的CSS规则中，使用~选择符，在#content1:target和#content2:target触发的时候分别去控制两个导航li元素的样式。至此两个问题，1.如何接收点击事件与2.如何操作相关DOM都已经解决，剩下的是一些小样式的修补工作。Demo戳我：纯CSS导航切换(:target伪类实现)
7、方法二：<inputtype="radio">&&<labelfor="">上面的方法通过添加<a>标签添加页面锚点的方式接收点击事件。这里还有一种方式能够接收到点击事件，就是拥有checked属性的表单元素，<inputtype="radio">或者<inputtype="checkbox">。假设有这样的结构：
8、对于上面的结构，当点击<inputclass="nav1"type="radio">单选框表单元素的时候，使用:checked是可以捕获到点击事件的。
9、同样用到了兄弟选择符~这样，当接收到表单元素的点击事件时，可以通过兄弟选择符~操作它的兄弟元素的样式。可以试着点击下面codepen中的单选框。
10、这里有个问题Tab切换，要点击的是<li>元素，而不是表单元素，所以这里很重要的一点是，使用<labelfor="">绑定表单元素。看看如下结构：
11、通过使用<label>包裹一个<挢旗扦渌;li>元素，而<label>有一个属性熠硒勘唏for可以绑定一个表单元素。上面的<li>中，有一层<labelfor="li">，里面的for="li1"意思是绑定id为li1的表单元素。label标签中的for定义：for属性规定label与哪个表单元素绑定。这样改造之后，当我们点击<li>元素的时候，相当于点击了<inputclass="nav1"id="li1"type="radio">这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被:checked伪类捕获到。可以将页面上的表单元素隐藏，做到点击<li>相当于点击表单：
12、应用到本题目，应该建立如下DOM结构：
13、使用两个单选框，分别对应两个导航选项，运用上面介绍的label绑定表单，:checked接收点击事件，可以得到第二解法。看看最后的结果：Demo戳我：纯CSS导航切换(label绑定input:radio&&~)
