1、实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是：如何接收点击事件如何操作相关DOM两种不同的方法实现需求：方法一：:target 伪类选择器如何接收点击事件，这里第一种方法采用 :target 伪类接收。:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。解释很难理解，看看实际的使用情况，假设 HTML 代码如下：
3、上面 <a href="#content1"> 中的锚点 #content1 就对应了列表1 <div id="content1"> 。锚点2与之相同对应列表2。可以使用 :target 接受到点击事件，并操作对应的 DOM 了：
5、仔细对比一下与上面结构的异同，只是将 ul 从两个 content 上面挪到了下面，因为这里需要使用兄弟选择符 ~ 。E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F。注意这里，最重要的一句话是 E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了。在这样调换位置之后，通过兄弟选择符 ~ 可以操作整个 .nav 的样式。
7、方法二：<input type="radio"> && <label for="">上面的方法通过添加 <a> 标签添加页面锚点的方式接收点击事件。这里还有一种方式能够接收到点击事件，就是拥有 checked 属性的表单元素， <input type="radio"> 或者<input type="checkbox"> 。假设有这样的结构：
9、同样用到了兄弟选择符 ~这样，当接收到表单元素的点击事件时，可以通过兄弟选择符 ~ 操作它的兄弟元素的样式。可以试着点击下面 codepen 中的单选框。
11、通过使用 <label> 包裹一个 <挢旗扦渌;li> 元素，而 <label> 有一个属性 熠硒勘唏for 可以绑定一个表单元素。上面的 <li> 中，有一层 <label for="li"> ，里面的 for="li1" 意思是绑定 id 为li1 的表单元素。label 标签中的 for 定义：for 属性规定 label 与哪个表单元素绑定。这样改造之后，当我们点击 <li> 元素的时候，相当于点击了 <input class="nav1" id="li1" type="radio">这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被 :checked 伪类捕获到。可以将页面上的表单元素隐藏，做到点击 <li> 相当于点击表单：
13、使用两个单选框，分别对应两个导航选项，运用上面介绍的 label 绑定表单，:checked 接收点击事件，可以得到第二解法。看看最后的结果：Demo戳我：纯CSS导航切换(label 绑定 input:radio && ~)
