利用纯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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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自动跳转中英文页面
2008/07/29 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
js常见表单应用技巧
2008/01/09 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js获取class的所有元素
2013/03/28 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
测量实习生自我鉴定
2013/09/19 职场文书
中学生操行评语
2014/04/24 职场文书
伊索寓言教学反思
2014/05/01 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
红色旅游心得体会
2014/09/03 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js