谈谈一些有趣的CSS题目（八）--纯CSS的导航栏Tab切换方案

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了谈谈一些有趣的CSS题目（八）--纯CSS的导航栏Tab切换方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4712字，纯文字阅读大概需要7分钟。

内容图文

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

所有题目汇总在我的 Github 。

8、纯CSS的导航栏Tab切换方案

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

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

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

1. 如何接收点击事件

2. 如何操作相关DOM

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

法一：:target 伪类选择器

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

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

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

    
列表1
    
列表2

列表1内容:123456
列表2内容:abcdefgkijkl

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

    
列表1
    
列表2

列表1内容:123456
列表2内容:abcdefgkijkl

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

#content1,
#content2{
    display:none;
}

#content1:target,
#content2:target{
    display:block;
}

列表1内容:123456
列表2内容:abcdefgkijkl

    
列表1
    
列表2

#content1:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
#content2:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

    
列表1

.nav1:checked ~ .nav li {
  // 进行样式操作
}

    
列表1

input{
    display:none;
}

    
    
    

        
列表1
        
列表2
    
    

        
列表1内容:123456
        
列表2内容:abcdefgkijkl