开发者社区> 前端王睿> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

教你两招用纯CSS写Tab切换

简介: 说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 关于模拟单选框,在我之前文章中有讲到,详情请戳→纯CSS模拟单选框和复选框 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
+关注继续查看

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。

而今天所要分享的,是使用 0 行JS代码来实现Tab切换!

具体效果如下:

Tab切换

方法一:模拟单选框原理

关于模拟单选框,在我之前文章中有讲到,详情请戳→纯CSS模拟单选框和复选框

该方法大致原理如下:

当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。

具体如何实现呢?请耐心往下看...

1. HTML结构

<!--HTML-->
<ul>
    <li>
        <input id="tab1" type="radio" name="tab" checked>
        <label for="tab1">选项一</label>
        <div class="content">选项一内容</div>
    </li>
    <li>
        <input id="tab2" type="radio" name="tab">
        <label for="tab2">选项二</label>
        <div class="content">选项二内容</div>
    </li>
    <li>
        <input id="tab3" type="radio" name="tab">
        <label for="tab3">选项三</label>
        <div class="content">选项三内容</div>
    </li>
</ul>

单选框想必大家都会用吧,type为radio,name属性值相同即可。

另外需要注意以下两点:

① label需要绑定input,方法就是label的for属性值与input的id一致,这样当点击label元素时input单选框就会被选中
input、label和div三者是有顺序的,不能随意调换顺序(原因后面你就知道了)

2. CSS样式

没有JS,那么CSS自然就得扮演举足轻重的角色。

/*CSS*/
*{ margin: 0; padding: 0;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li input{ display: none;}
ul li label{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li input:checked+label{ color: #fff; background-color: #000;}
ul li:last-child label{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li input:checked~.content{ opacity: 1;}

这里同样有几个重点需要注意:

① input需要隐藏,因为我们并不需要显示它,但它却是实现Tab切换的核心力量
“input:checked+label” 表示被选中的单选框后的 label 元素需要做标记
③ .content 元素需要先全部隐藏
“input:checked~.content” 表示被选中的单选框后的 .content 元素需要显示

注: + 表示相邻兄弟选择器,也就是选择紧邻其后的元素; ~ 表示兄弟选择器,也就是选择该元素之后的所有同级元素

方法二::target伪类

关于:target伪类,在我之前文章中有讲到,详情请戳→纯CSS制作单页Web应用

该方法大致原理如下:

当用户点击a元素时,页面URL后会相应添加当前所点击的锚链接,这时对应此锚连接id的.content元素就会应用:target伪类的样式,而同时也给已应用上:target伪类的.content元素之后的a元素自身应用样式。

1. HTML结构

<!--HTML-->
<ul>
    <li>
        <div class="content" id="content1">选项一内容</div>
        <a href="#content1">选项一</a>
    </li>
    <li>
        <div class="content" id="content2">选项二内容</div>
        <a href="#content2">选项二</a>
    </li>
    <li>
        <div class="content" id="content3">选项三内容</div>
        <a href="#content3">选项三</a>
    </li>
</ul>

这种方式的HTML结构相对比较简单,不需要使用隐藏的单选框作为媒介,而是使用锚链接和:target作为连接“选项”与“选项内容”之间的桥梁。

另外需要注意以下两点:

① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改

2. CSS样式

/*CSS*/
*{ margin: 0; padding: 0;}
a{ text-decoration: none; color: #000;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li:last-child a{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li .content:target{ opacity: 1;}
ul li .content:target+a{ color: #fff; background-color: #000;}

这里同样有几个重点需要注意:

“.content:target” 将锚链接指向的当前.content元素应用样式
“.content:target+a” 将锚链接指向的当前.content元素后紧邻的a元素应用样式

本文重点总结

无需JS,利用单选框或锚链接,再配合一些CSS样式即可制作简单的Tab切换

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS_选择器
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54696007 类选择器 class 属性规定元素的类名(classname) 类选择器以一个点号显示 .center {text-align: center} class类似一个标记。
754 0
***CSS魔法堂:选择器及其优先级
一、前言                                首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. img.thumb:after  B.[data-job="frontend"]::first-letter   C.
702 0
CSS 选择器
1、ID选择器 2、CLASS选器 3、属性选择器 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。 CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=v
996 0
CSS样式选择器优先级
原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a、b、c、d,可以以这四种等级为依据确定CSS选择器的优先级。1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量。
898 0
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
870 0
css知多少(5)——选择器
原文:css知多少(5)——选择器 1. 引言   从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。   CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。
927 0
CSS 选择器
table tbody td:first-child { text-align: left; } .table tbody tr td + td { text-align: center; } table tbody tr:nth-child(even) { ...
542 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载