利用纯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教程(1):什么是CSS3
Apr 02 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP date函数参数详解
2006/11/27 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
后备干部考察材料
2014/02/12 职场文书
优秀会计求职信
2014/07/04 职场文书
公司证明怎么写
2014/09/22 职场文书
诚信教育主题班会
2015/08/13 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python