css实现tab切换效果

<div class="match-instruction"><div id="tab2" class="mi-cont">奖项设置</div><div id="tab3" class="mi-cont">评审标准</div><div id="tab4" class="mi-cont">活动动态</div><div id="tab1" class="mi-cont active">参赛时间及方式</div><ul class="mi-tab"><li><a href="#tab1"><span>参赛时间及方式</span></a></li><li><a href="#tab2"><span>奖项设置</span></a></li><li><a href="#tab3"><span>评审标准</span></a></li><li><a href="#tab4"><span>活动动态</span></a></li></ul></div>

上面是页面html结构，下面贴css样式代码

<style>
.match-instruction{position:relative; padding-top:1.9rem;}
div[id^="tab"]{color:#fff; display:none;}
#tab1:target,#tab2:target,#tab3:target,#tab4:target{display:block;}
#tab1.active{display:block;}
#tab2:target~#tab1,#tab3:target~#tab1,#tab4:target~#tab1{display:none;}
#tab1:target~.mi-tab li:nth-child(1),#tab2:target~.mi-tab li:nth-child(2),#tab3:target~.mi-tab li:nth-child(3),#tab4:target~.mi-tab li:nth-child(4){z-index:5; margin-top:0;}
#tab1:target~.mi-tab li:nth-child(1):after,#tab2:target~.mi-tab li:nth-child(2):after,#tab3:target~.mi-tab li:nth-child(3):after,#tab4:target~.mi-tab li:nth-child(4):after{border-bottom-width:1.9rem;}
#tab1:target~.mi-tab li a[href="#tab1"],#tab2:target~.mi-tab li a[href="#tab2"],#tab3:target~.mi-tab li a[href="#tab3"],#tab4:target~.mi-tab li a[href="#tab4"]{height:1.9rem; line-height:2.05rem;}
.mi-tab{height:1.9rem; position:absolute; left:0; top:0; right:0; margin-right:.8rem;}
.mi-tab li{float:left; width:31%; position:relative; background-color:#77c8df; z-index:4; margin-top:.3rem;}
.mi-tab li+li{width:23%; z-index:3; background-color:#a2ca64;}
.mi-tab li+li+li{z-index:2; background-color:#f0c55e;}
.mi-tab li+li+li+li{z-index:1; background-color:#90c89f;}
.mi-tab li:after{content:""; position:absolute; right:-.8rem; bottom:0; width:0; height:0; border-right:.8rem solid transparent; border-bottom:1.6rem solid #77c8df;}
.mi-tab li+li:after{border-bottom-color:#a2ca64;}
.mi-tab li+li+li:after{border-bottom-color:#f0c55e;}
.mi-tab li+li+li+li:after{border-bottom-color:#90c89f;}
.mi-tab a{display:block; height:1.6rem; line-height:1.75rem; font-size:.65rem; color:#373534; text-align:center; margin-right:-.4rem;}
.mi-tab a span{position:relative; z-index:1;}
.mi-tab li:first-child{z-index:5; margin-top:0;}
.mi-tab li:first-child:after{border-bottom-width:1.9rem;}
.mi-tab li:first-child a{height:1.9rem; line-height:2.05rem;}
#tab2:target~.mi-tab li:first-child,#tab3:target~.mi-tab li:first-child,#tab4:target~.mi-tab li:first-child{z-index:4; margin-top:.3rem;}
#tab2:target~.mi-tab li:first-child:after,#tab3:target~.mi-tab li:first-child:after,#tab4:target~.mi-tab li:first-child:after{border-bottom-width:1.6rem;}
#tab2:target~.mi-tab li:first-child a,#tab3:target~.mi-tab li:first-child a,#tab4:target~.mi-tab li:first-child a{height:1.6rem; line-height:1.75rem;}
</style>

这个css实现tab切换效果在实际项目中并不实用，这里只是单纯的提供一种css实现方案，效果如下图

转载于:https://www.cnblogs.com/jokum/p/7452599.html

css实现tab切换效果相关推荐

css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
Vue.js实现tab切换效果
tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"><ul class="tab-tilte" ...
[css] 用CSS实现tab切换
[css] 用CSS实现tab切换 1.用label结合单选按钮radio接受切换tab的单击 2.用zindex层级来显示当前tab页对应的内容 3.用css兄弟选择器选中对应的tab页签和内容页, ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
Axure的动态面板制作tab切换效果
最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下! 结合注册窗 ...
js第三章简答题5(制作如图所示的Tab切换效果)
ps:代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
vue使用动态组件实现TAB切换效果
目录一.方法1:使用Vant组件库的tab组件二. 方法2:手动创建tab切换效果 2.在components文件夹下创建切换的.vue页面.引入使用 3.布局:上面放tab点击的标签,下面放组件 ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
html 天猫上拉切换,jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单 ...

css实现tab切换效果

css实现tab切换效果相关推荐

最新文章

热门文章