利用纯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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
Prototype Array对象 学习
2009/07/19 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
基于python plotly交互式图表大全
2019/12/07 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
出国留学经济担保书
2014/04/01 职场文书
解除劳动合同协议书
2014/04/14 职场文书
2015年党员承诺书
2015/01/21 职场文书
应届生简历自我评价
2015/03/11 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL