利用纯CSS3实现tab选项卡切换示例代码


Posted in HTML / CSS onSeptember 21, 2016

先来看看效果图

利用纯CSS3实现tab选项卡切换示例代码

CSS3伪类target
利用target的特性,可以实现纯css的tab效果切换

示例代码如下

复制代码
代码如下:

<style type="text/css">
.tabmenu{
position:absolute;
top:-28px;
left:144px;
margin:0px;
}
.tabmenu li{
display:inline-block;
}
.tabmenu li a{
display:block;
padding:5px 10px;
margin:0 10px 0 0;
border:1px solid #91a7b4;
border-radius:5px 5px 0 0;
background-color:#e3f1f8;
color:#333;
text-decoration: none;
font-size:16px;
}
.tablist{
position:relative;
top:200px;
margin:0 auto;
width:600px;
min-height:200px;
}
.tab_content{
position:absolute;
width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:10px;
box-shadow:0 2px 3px rgba(0,0,0,0,1);
font-size:16px;
line-height:16px;
color:#666;
background-color:#fff;
}
#tab1:target,#tab2:target,#tab3:target{
z-index:1;
}
</style>
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<div id="tab1" class="tab_content">tab1</div>
<div id="tab2" class="tab_content">tab2</div>
<div id="tab3" class="tab_content">tab3</div>
</div>

最关键的代码

复制代码
代码如下:

#tab1:target,#tab2:target,#tab3:target{
z-index:1;
}

先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果!

target兼容性
最后提一下兼容性问题:因为这是CSS3新特性,所以不兼容老版本的浏览器,例如IE678。

总结
以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 #HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python 实现视频 图像帧提取
2019/12/10 Python
python类共享变量操作
2020/09/03 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
协议书的格式
2014/04/23 职场文书
六年级学生期末评语
2014/12/26 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers