教你两招用纯CSS写Tab切换

编程之家收集整理的这篇文章主要介绍了教你两招用纯CSS写Tab切换编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

说到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; visibility:hidden; 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; visibility:visible;}

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

① 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写Tab切换全部内容,希望文章能够帮你解决教你两招用纯CSS写Tab切换所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。 CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。 概述 看一段比
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注