利用纯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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 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经典的给图片加水印程序
2006/12/06 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
koa源码中promise的解读
2018/11/13 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python with用法实例
2015/04/14 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
SQL Server面试题
2013/04/04 面试题
岗位竞聘书范文
2014/03/31 职场文书
病人慰问信范文
2015/02/15 职场文书
不同意离婚上诉状
2015/05/23 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
mysql数据库实现设置字段长度
2022/06/10 MySQL