善用CSS伪类,不用JS也能做出选项卡功能

时间: 2019-05-17阅读: 521标签: 伪类

先看看Demo:


CODEPEN 示例页面

讲到选项卡(Tabs)功能时,大多会想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery实现的(其实网络上有很多用jQuery开发的Tab);但其实不用jQuery或JavaScript技术,就能实现高效能且易维护的Tabs元件,让我们来看看是怎么办到的:


规划HTML结构

通常我们会用列表元素来制作选项卡的界面,每个<li>代表用来包含一组选项卡与其对应的内容块。接下来加入选项卡,选项卡必须使用<label>元素才能实作我们要的功能,原因待会会讲,是这篇文章的核心技巧之一。

内容块则是<div>元素。再来我们为每个<label>前面加上表单元素Radio button,结果如下:

<ul class="tabs">
  <li>
    <input type="radio" name="tabs">
    <label class="tab">页面A</label>
    <div class="section">内容A</div>
  </li>
  <li>
    <input type="radio" name="tabs">
    <label class="tab">页面B</label>
    <div class="section">内容B</div>
  </li>
  <li>
    <input type="radio" name="tabs">
    <label class="tab">页面C</label>
    <div class="section">内容C</div>
  </li>
</ul>


为什么使用Label与Radio button?

这篇文章的主要技巧也就是要靠这两种元素的特性,因为我们要“借用”Radio button的单选特性,决定哪个Tab是Active,同时确保其他Tab是未选中的状态。

Radio button默认的样式是非常丑陋的,而且我们能改动的样式也是有限的,所以不建议直接把它设计成Tab,所以我们使用<label>来担任触发的角色,也比较容易改变样式,再藉由Label的For属性去触发对应id的Radio button。

所以我们为Radio button加上id,然后将Label的for属性指向对应的id:

<ul class="tabs">
  <li>
    <input type="radio" name="tabs" id="tabA">
    <label class="tab" for="tabA">页面A</label>
    <div class="section">内容A</div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tabB">
    <label class="tab" for="tabB">页面B</label>
    <div class="section">内容B</div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tabC">
    <label class="tab" for="tabC">页面C</label>
    <div class="section">内容C</div>
  </li>
</ul>

这样就完成我们的HTML结构了,再来要写点CSS,让功能得以运作起来。


写点CSS

我们先让<li>并排(display:inline-block)。再来为<label>和内容块<div class=“section”>设计外观。

特别注意内容块用绝对定位让每次显示的内容都在同样的位置,之后我们再控制层叠等级(z-index)和透明度(opacity)来实现显示/隐藏。

li { display: inline-block; }

input[type="radio"] {
  position: absolute;
  outline: none;
    ...
}

.tab {
    ...
}

.section {
  position: absolute;
  top: 50px; // 取决于你的Label高度
  left: 0;
    ...
}

咦?还是不能动?因为我们还需要运用CSS的两个重要技巧:伪类(Pseudo-class)和通用兄弟元素选择器(Sibling Combinator),才能让选项卡与内容块做切换。


加入CSS伪类与通用兄弟元素选择器

我们为Radio button加上伪类:checked,表示当这个Radio button被选中时(等于对应的标签被选中使)才会呈现的样式。

input[type="radio"]:checked {
    ...
}

然后要做切换动作的是选项卡和内容块,由于它们与Radio button属同一层父元素,所以我们这里要用到通用兄弟元素选择器~来做,通用兄弟元素选择器有两种:

  1. 相邻兄弟选择器(Adjacent Sibling Combinator)是用来选择互为兄弟元素的相邻的元素。
  2. 通用兄弟元素选择器(General Sibling Combinator)则是用来选择互为兄弟元素的所有匹配的元素。

我们使用通用兄弟元素选择器即可:

input[type="radio"]:checked ~ .tab {        // 这里也可以使用相邻兄弟选择器来做
    ...
}

input[type="radio"]:checked ~ .section {
    ...
  z-index: 2;
}

注意内容内存块(.section)要加上z-index属性才能覆盖其它选项卡的内容块,最后我们再将Radio button设为透明或使用定位的技巧让它消失在页面上,前面没有先提这点的原因,是因为可以让你在点选选项卡时,观察Radio button的选中状态变化,同时也方便测试,确认选项卡对应的Radio button有正确被触发。

这样就大功告成啦!


整理

大略整理一下重点与需要注意的地方:

  1. Radio button的单选特性是基于同样的name属性,所以name一定要设,而且要一样;反之,你可以设置多组name去实现多组的选项卡组件,而且各自是独立运作,不会互相影响。
  2. Radio button的id和Label的for是必要的属性。
  3. 内容块的定位要避免覆盖到选项卡。
  4. 注意HTML的结构是否正确,CSS选择器的使用是否正确(选项卡和内容块有没有在同一层)。
  5. 注意z-index的设置是否正确。

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作

原文来自:https://segmentfault.com/a/1190000019214800


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3357

css的伪类有哪些?

同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。CSS 伪类用于向某些选择器添加特殊的效果。

css中:visited怎么不起作用?

css定义超链接四个状态也是有顺序的,对于这4个伪类的设置,有一点需要特别注意,那就是它们的先后顺序,要让它们遵守一个顺序原则,也就是link ~ visited ~ hover ~ active 。

css伪类和伪元素

伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,怕出错,怕用不好

理解:before伪类搭配vertical-align:middle实现垂直居中的原理

总所周知,Css如何实现元素垂直居中?已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下:

css中:focus伪类的使用

当元素获取到焦点之后,若该元素是一个有效的链接,则通过“Enter”键即可进入该链接地址;在页面中也可以通过\\\"Tab\\\"键,遍历所有的可获得焦点的元素,使其获得焦点;

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些?p:first-of-type:选择属于其父元素的首个<p>元素,p:last-of-type:选择属于其父元素的最后<p>元素,p:only-of-type:属于父元素的特定类型的唯一子元素,p:only-child:属于父元素的唯一子元素的每个<p>元素;p:nth-child(2)

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广