html导航页面转换,纯CSS实现导航栏Tab切换效果

不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏切换：

CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。

实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是：

如何接收点击事件

如何操作相关DOM

下面看看如何使用两种不同的方法实现需求：

法一：:target 伪类选择器

首先，我们要解决的问题是如何接收点击事件，这里第一种方法我们采用 :target 伪类接收。

:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。

解释很难理解，看看实际的使用情况，假设我们的 HTML 代码如下：

CSS Code复制内容到剪贴板

列表1列表2

列表1内容:123456

列表2内容:abcdefgkijkl

由于要使用 :target，需要 HTML 锚点，以及锚点对应的 HTML 片段。所以上面的结构要变成：

CSS Code复制内容到剪贴板

列表1 列表2

列表1内容:123456

列表2内容:abcdefgkijkl

这样，上面 中的锚点 #content1 就对应了列表1

。锚点2与之相同对应列表2。

接下来，我们就可以使用 :target 接受到点击事件，并操作对应的 DOM 了：

CSS Code复制内容到剪贴板

#content1,

#content2{

display:none;

}

#content1:target,

#content2:target{

display:block;

}