龙喵专栏 /前端 /内容

纯css实现tab切换效果,两种方法参考

版权声明:龙喵网
网站网址:http://ailongmiao.com/

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

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

具体效果如下:
纯css实现tab切换效果,两种方法参考

方法一:模拟单选框原理

纯css实现t纯CSS模拟单选框和复选框

浏览器默认的一些表单样式都不太好看,就比如说在Chrome浏览器下,默认单选框长下面这样:

纯css实现tab切换效果,两种方法参考

灰不溜秋的,什么鬼,其实我想要下面这样的:

纯css实现tab切换效果,两种方法参考

这样看起来就很不错,还加了动画效果,可是默认的单选框只能改变其大小,像背景颜色啥的并不能改变,那该怎么办呢?

没关系,既然不能改变其本身,那咱就自己造一个出来。

我们可以用个简单的span标签(当然你也可以用其他标签)来模拟原生的单选框,大概原理就是,先使用label标签将原生单选框、用于模拟单选框的span标签以及文字包起来,并将原生单选框隐藏,然后再使用:checked伪类和+选择器来给span标签加选中样式。上面GIF图中美化单选框的具体代码如下:

<div class="form-group">
    <p>性别:</p>
    <label><input name="sex" type="radio" checked /><span></span>男</label>
    <label><input name="sex" type="radio" /><span></span>女</label>
</div>
p{ display: inline-block;}
label{ position: relative; padding:0 10px 0 25px; cursor: pointer;}
label input{ display: none;}
label span{ position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 16px; margin: auto; border: 1px solid #ccc; border-radius: 100%;}
label span:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 6px; height: 6px; margin: auto; border-radius: 100%; background: #fff;
-webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .3s; transition: all .3s;}
label input:checked + span{ border-color: #1db0fc; background: #1db0fc;}
label input:checked + span:after{ -webkit-transform: scale(1); transform: scale(1);}

以上代码可能有几个地方需要解释一下:

label标签可以将文字和表单控件绑定在一起,当你点击其中的文字时,与之绑定的表单控件将会相应获取焦点(单选框与复选框是选中该选项);

:checked伪类选择器是用于筛选被选中的单选框或复选框,需要注意的是,该选择器最低只兼容到IE9;

+选择器是用于筛选紧邻其后的兄弟元素,比如示例代码中就是筛选被选中的单选框之后紧邻的span元素。既然这里提到了,就再简单地说说与之相似的~选择器,该选择器是用于筛选其后的所有兄弟元素,这两个选择器可能平时用得比较少,但是有时候用处还是挺大的。

该方法大致原理如下:

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

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

1. 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>

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

另外需要注意以下两点:

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

2. CSS样式

没有JS,那么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伪类

该方法大致原理如下:

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

1. 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样式

*{ 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元素应用样式

版权声明:龙喵网
网站网址:http://ailongmiao.com/

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/259.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

无障碍 Web 开发

无障碍 Web 开发

Web前端 2019-06-04 5

良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

禁止用户打开HTML页面调试

Web前端 2019-05-18 5

有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

细数CSS伪元素及其用法

Web前端 2019-03-29 12

CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

  选择打赏方式

打赏

打赏