利用纯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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
node实现登录图片验证码的示例代码
2018/04/20 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python MD5加密实例详解
2017/08/02 Python
python 图像平移和旋转的实例
2019/01/10 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
2014年党总支工作总结
2014/12/18 职场文书
目标责任书格式范文
2015/05/11 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js