!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

怎么用纯css实现Tab切换? - css笔记

当我们思考能否用css来实现时还应考虑到html的结构,能不能构造出满足css已存在的选择器的html布局,这一节和大家分享怎么用纯css实现Tab切换

css实现依赖于html结构,因为css选择器有限,有子选择器,没有父选择器,有后选择器,没有前选择器,所以局限性很大。所以当我们思考能否用css来实现时还应考虑到html的结构,能不能构造出满足css已存在的选择器的html布局

前言

哪些简单的效果可以考虑用css来实现呢,目前css能够做的交互有

  • 鼠标经过/离开:hover
  • 鼠标点击::cheked

那是不是上述所有的交互都可以用css来实现呢?显然不是的,css实现依赖于html结构,因为css选择器有限,有子选择器,没有父选择器,有后选择器,没有前选择器,所以局限性很大。所以当我们思考能否用css来实现时还应考虑到html的结构,能不能构造出满足css已存在的选择器的html布局。

效果展示;

111
222
333

先从html结构说起

一般在碰到tab类型的组件时,一般会有如下的html

<div class="tabs">
  <div class="tab-nav">
    <div class="tab-item">tab01</div>
    <div class="tab-item">tab02</div>
    <div class="tab-item">tab03</div>
  </div>
  <div class="tab-content">
    <div>111</div>
    <div>222</div>
    <div>333</div>
  </div>
</div>

大致就是这种布局吧,暂且称作分离模式吧,足够灵活,就是导航部分和内容结构分开,需要什么动画效果都可以分别实现。

还有一种布局,大概是这样的

<div class="tabs">
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
</div>

这里每一个tab里面的导航和内容是一起的,我们称为合并模式吧,这种在组件化里面很常见,比如在react里面,一个tab组件,一般会写成这样

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>,
mountNode);

是不是很像?

相信用js只要是一名合格的前端都能轻易的实现吧,这里我们主要是研究如何用css来实现

第一种布局(分离模式)

这里有两种思路

  1. 锚点实现 herf + :target
  2. css3 nth-child(n) 选择器

锚点实现主要是在a标签加上href属性,然后目标元素上添加相同的id,当点击a标签时,目标元素的:target就生效了

<style>
#item01:target{ background:red }
</style>
<a href="#item01">跳转</a>
<div id="item01">内容</div>

这种方式可以将导航和内容链接到一块,但是在浏览器中有一个很不友好的地方,就是当点击带有锚点的a链接的时候,浏览器会自动定位到目标位置,很影响体验,需要去掉这种效果估计还得借助js来实现,故不太推荐用这种方式

nth-child(n) 选择器,这种方式就比较传统了,不过导航切换部分还是用到label+input[type=radio],实现基本和js是同一个思路,甚至还不如js方便,因为你有多少个tab选项就得写多少个nth-child样式

.tab-nav input:nth-of-type(1):checked ~ .tab-content :nth-of-type(1),
.tab-nav input:nth-of-type(2):checked ~ .tab-content :nth-of-type(2),
.tab-nav input:nth-of-type(3):checked ~ .tab-content :nth-of-type(3),
...
{
  z-index:1
}

你大概会看到这样的样式,如果选项卡比较固定,基本是静态的,比较少,可以一一写出来,如果比较多,或者是js生成的,那么建议这一部分样式也通过js生成出来。

下面着重来实现第二种布局

第二种布局(合并模式)

如果是这样一种布局,那么导航和内容就可以通过相邻选择器+联系上了,重点是如何实现选项卡的样式,当然,我们也需要改一下html

<div class="tabs">
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab01"/>
    <label class="tab-item" for="tab01">tab01</label>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab02"/>
    <label class="tab-item" for="tab02">tab02</label>
    <div class="tab-content">222</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab03"/>
    <label class="tab-item" for="tab03">tab03</label>
    <div class="tab-content">333</div>
  </div>
</div>

然后我们通过样式美化一下

.tabs{
  position:relative;
  width:400px;
  height:300px;
}
.tab-pane{
  display:inline-block;
}
.tabs input[type='radio']{
  position:absolute;
  clip:rect(0,0,0,0)
}
.tab-item{
  display:block;
  height:34px;
  line-height:34px;
  cursor:pointer;
  padding:0 10px
}

.tab-content{
  position:absolute;
  border:1px solid #eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  background:#fff;
}

然后加入交互,主要就是相邻选择器+:checked选择器,

.tabs input[type='radio']:checked+.tab-item{/**导航选中状态**/
  background:orangered;
  color:#fff
}
.tabs input[type='radio']:checked+.tab-item+.tab-content{/**当前内容切换**/
  z-index:1
}

我们这里只用了z-index:1就实现了隐藏显示,当然还可以实现更多的效果,比如淡入淡出等

演示效果见页底Demo2

当然,这种方式也有一定的不足,由于这里内容区域用到了绝对定位,所以整个tab容器就不能根据里层的内容来自适应,也需要给外层一个固定的高度,不然整个tab容器就只有顶部导航区域才占据空间,这明显就不合常理。

添加一点动画效果

/**给导航添加横条的缩放效果**/
.tab-item:after{
  position:absolute;
  content:'';
  height:3px;
  width:100%;
  background:orangered;
  left:0;
  bottom:2px;
  transition:.3s;
  transform:scaleX(0)
}

.tabs input[type='radio']:checked+.tab-item:after{
  transform:scaleX(1)
}
/**给内容区域添加一个淡入淡出的效果**/
.tab-content{
  position:absolute;
  background:#eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  transition:.3s;
  opacity:0;
  transform:translateY(50px)
}

.tabs input[type='radio']:checked+.tab-item+.tab-content{
  z-index:1;
  opacity:1;
  transform:translateY(0)
}

演示效果见页底Demo3

小节

通过css我们也能实现导航效果,而且更容易复用,只需要复制html结构就行(当然这里肯定也是需要改一下nameid的)。这就有点类似组件的意思了,给你一个html结构,你不需要关系切换逻辑,只需要根据接口取到数据,然后塞到每个tab标签页里面去,事实上现在react实现的组件也一般都是这种思路,只需关注业务逻辑,但这些都是大工程,哪里有css直接来的快。

这就让我想到了刚进公司那会,每碰到一个tab,那就要取一个id,然后用jquery实现一遍tab切换逻辑,后来放聪明了,把tab封装成一个插件,碰到一个tab就调用一次插件…看着代码变少了,其实也没什么本质区别。

用css来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来,真正做一个UI组件该做的事,希望css越来越好

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
css

怎么实现纯CSS弹出框? - CSS笔记

2020-5-9 16:52:32

css

怎么用CSS实现动态烟尾效果? - CSS笔记

2020-5-11 21:47:30

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索