纯CSS制作的TAB选项卡
2017-05-22 14:56
549 查看
代码
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
<ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">选项卡 1</label> <div id="tab-content1" class="tab-content"> <p>选项卡内容 1</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">选项卡 2</label> <div id="tab-content2" class="tab-content"> <p>选项卡内容 2</p> </div> </li> </ul>
CSS代码
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding: 20px; text-align: left; font-family: Lato; color: #fff; background: #9b59b6; } .tabs { width: 650px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; text-align: left; } .tabs li { float: left; display: block; } .tabs input[type="radio"] { position: absolute; top: -9999px; left: -9999px; } .tabs label { display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; font-weight: normal; text-transform: uppercase; background: #8e44ad; cursor: pointer; position: relative; top: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: #703688; } .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #612e76; } .tabs [id^="tab"]:checked + label { top: 0; padding-top: 17px; background: #612e76; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; }
相关文章推荐
- 纯css制作tab选项卡(一)
- 纯css制作tab选项卡(二)
- 【自我作业】JS+CSS tab选项卡
- PHP开发-CSS实现Tab选项卡功能(附效果图)
- 37个Ajax和CSS实现的Tab选项卡切换效果界面
- css Tab选项卡2
- Axure RP制作tab选项卡
- 37个Ajax和CSS实现的Tab选项卡切换效果界面
- JS+CSS仿网易的选项卡TAB标签样式-导航菜单类
- 【转】纯CSS3制作的Tab选项卡
- 纯DIV+CSS简单实现Tab选项卡左右切换效果
- 37个Ajax和CSS实现的Tab选项卡切换效果界面
- 三种简洁的经典高效的DIV+CSS制作的Tab导航简析
- 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼
- 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼
- JS+CSS仿网易的选项卡TAB标签样式
- css + div + js 制作HTML tab control
- css制作导航工具CSS Tab Designer
- JS+CSS实现的不规则TAB选项卡效果
- JS+CSS实现的简洁的TAB选项卡