假如尚有什么疑问可能发起，假设我们的HTML代码如下： ul class=navli列表1/lili列表2/li/uldiv列表1内容:123456/divdiv列表2内容:abcdefgkijkl/div 由于要利用:target，通例而言确实需要用到必然的剧本才气实现，当我们点击li元素的时候，这个时候。

这里我只是将ul从两个content上面挪到了下面，当点击列表1触发href=#content1时， 这里尚有一种方法可以或许吸收到点击事件，文中若有不正之处， label 标签中的 for 界说：for 属性划定 label 与哪个表单位素绑定。

:checked吸收点击事件，可以通过兄弟选择符 ~ 操纵它的兄弟元素的样式， .nav1:checked ~ .nav li { // 举办样式操纵} 同样用到了兄弟选择符 ~ 这样。

文笔有限，它需要一个 id 去匹配文档中的 target ，做到点击li相当于点击表单： input{display:none;} 这样， #content1:target ~ .nav li{// 改变li元素的配景致和字体颜色:first-child{background:#ff7300;color:#fff;}}#content2:target ~ .nav li{// 改变li元素的配景致和字体颜色:last-child{background:#ff7300;color:#fff;}} 上面的 CSS 法则中，一开始页面中的#content1与#content2都是埋没的。

才疏学浅。

虽然 URL 末端带有锚名称 #，我们要办理的问题是如何吸收点击事件，万望奉告，在#content1:target和#content2:target触发的时候别拜别节制两个导航li元素的样式，而这个表单位素被点击选中的时候，酿成如下布局： div id=content1列表1内容:123456/divdiv id=content2列表2内容:abcdefgkijkl/divul class=navlia href=#content1列表1/a/lilia href=#content2列表2/a/li/ul 仔细比拟一下与上面布局的异同。

需要 HTML 锚点，利用:checked是可以捕捉到点击事件的，Tab 切换，1. 如何吸收点击事件与2. 如何操纵相关DOM都已包办理，最重要的一句话是 E~F 只能选择 E 元素之后的 F 元素，看看如下布局： input class=nav1 id=li1 type=radioul class=navlilabel for=li1列表1/label/li/ul 通过利用label包裹一个li元素，可以多多交换，再修改一下，就是拥有checked属性的表单位素， 上面的li中，虽然除了content1 content2的切换。

不绝更新，就需要我们在 DOM 布局机关的时候多把稳，想到什么说什么， 可是， Demo戳我：纯CSS导航切换(:target伪类实现) 法二：input type=radiolabel for= 上面的要领通过添加a标签添加页面锚点的方法吸收点击事件，可以获得第二解法，应用到本题目，有一层label for=li， 这样改革之后，题目范例天马行空， 可以试着点击下面 codepen 中的单选框， 开本系列， 在这样变更位置之后， 这个时候。

下面看看如何利用 CSS 完成同样的工作，不只为了拓宽一下办理问题的思路，我们应该成立如下 DOM 布局： div class=containerinput class=nav1 id=li1 type=radio name=navinput class=nav2 id=li2 type=radio name=navul class=navli class=activelabel for=li1列表1/label/lililabel for=li2列表2/label/li/uldiv class=contentdiv class=content1列表1内容:123456/divdiv class=content1列表2内容:abcdefgkijkl/div/div/div 利用两个单选框， 假设有这样的布局： input class=nav1 type=radioul class=navli列表1/li/ul 对付上面的布局，#content2{display:none;}#content1:target， :target是 CSS3 新增的一个伪类，以及锚点对应的 HTML 片段， 到此本文竣事，更涉及一些容易忽视的 CSS 细节。

内里的for=li1意思是绑定 id 为li1 的表单位素。

运用上面先容的 label 绑定表单，我们的li元素样式也要不绝变革，剩下的是一些小样式的修补事情，想到什么说什么。

当吸收到表单位素的点击事件时， 在上面HTML的基本上，所以这里很重要的一点是， 解题不思量兼容性，这里有个问题我们的 Tab 切换， 看看最后的功效： Demo戳我：纯CSS导航切换(label 绑定 input:radio ~) 所有题目汇总在我的Github，要点击的是li元素，并操纵对应的 DOM 了： #content1，就可以指向文档内某个详细的元素，谈谈一些有趣的CSS题目，题目天马行空，相当于点击了input class=nav1 id=li1 type=radio这个单选框表单位素，利用label for=绑定表单位素， 接下来，点击列表2亦是如此，看看实际的利用环境，页面的 URL 会产生变革： 由酿成#content1 接下来会触发#content1:target{ }这条 CSS 法则，我们就可以利用:target接管到点击事件。

发到博客但愿获得更多的交换，当我们点击input class=nav1 type=radio单选框表单位素的时候，等于： 如何吸收点击事件 如何操纵相关DOM 下面看看如何利用两种差异的要领实现需求： 法一：:target伪类选择器 首先， 至此两个问题。

表明很难领略。

不绝更新，选择 E 元素后头的所有兄弟元素 F，这里第一种要领我们回收:target伪类吸收，#content2:target{display:block;} 上面的 CSS 代码，别离对应两个导航选项，锚点2与之沟通对应列表2，利用纯CSS方案，所以顺序就显得很重要了，这个被链接的元素就是方针元素(target element)。

，上面a href=#content1中的锚点#content1就对应了列表1div id=content1，而label有一个属性for可以绑定一个表单位素，而不是表单位素， E~F{ cssRules } 。

重要的工作说三遍， 如此即到达了 Tab 切换。

为什么要这样做呢？ 因为这里需要利用兄弟选择符 ~ ，#content1元素由display:none酿成display:block， 留意这里， 实现 Tab 切换的难点在于如何利用 CSS 吸收到用户的点击工作并对相关的节点举办操纵，实现雷同下图的导航栏切换： CSS 的强大之处有的时候超乎我们的想象，又可以被:checked伪类捕捉到，不绝更新。

假如解题中有你感受到生僻的 CSS 属性，我们利用 ~ 选择符，可用于选取当前勾当的方针元素。

在#content1:target触发的时候可以同时去修改li的样式，通过兄弟选择符 ~ 可以操纵整个.nav的样式，原创文章， 所有题目汇总在我的Github https://github.com/chokcoco/iCSS/issues/2 8、纯CSS的导航栏Tab切换方案 不消Javascript。

赶忙去补习一下吧，input type=radio可能input type=checkbox，CSS3 兄弟选择符(E~F) ，我们就可以将页面上的表单位素埋没，所以上面的布局要酿成： ul class=navlia href=#content1列表1/a/lilia href=#content2列表2/a/li/uldiv id=content1列表1内容:123456/divdiv id=content2列表2内容:abcdefgkijkl/div 这样，。