介绍一个纯css制作tab的实例代码
程序员文章站
2022-04-06 13:45:17
...
使用radio单选按钮可以制作tab效果,有几个标签页,就需要对应添加几个input,同时每个input的name必须设置为一致,使用CSS3的同级元素链接符来改变样式。而Tab里面的nav导航都要用label包裹并添加对应的for.
ps:tab不支持IE8及其以下,box 布局IE 6.0-11.0不支持可float浮动替代
ps:tab不支持IE8及其以下,box 布局IE 6.0-11.0不支持可float浮动替代
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>DEMO3</title> <style type="text/css"> /* tab头区域 */ .ui-tab input { display: none } /* 内容区域 */ .ui-tab .ui-content ul { display: none; min-height: 200px; } /* 头部区域选中 */ #new:checked ~ .ui-nav .new, #hot:checked ~ .ui-nav .hot, #video:checked ~ .ui-nav .video { background: #F4BD00; } /* 内容区域选中 */ #new:checked ~ .ui-content .new-list, #hot:checked ~ .ui-content .hot-list, #video:checked ~ .ui-content .video-list { display: block; background: #f6f6f6; } /* tab头部布局 */ .ui-nav ul { display: -webkit-box; display: box; height: 45px; line-height: 45px; background: #fff; } .ui-nav ul > li { -webkit-box-flex: 1; box-flex: 1; text-align: center; } .ui-nav ul > li label { width: 100%; display: block; cursor: pointer; } </style> </head> <body> <!-- --> <p class="ui-tab"> <input type="radio" name="ui-tab" id="new" checked="checked" /> <input type="radio" name="ui-tab" id="hot" /> <input type="radio" name="ui-tab" id="video" /> <p class="ui-nav"> <ul> <li class="new"><label for="new">最新新闻</label></li> <li class="hot"><label for="hot">社会焦点</label></li> <li class="video"><label for="video">最新视频</label></li> </ul> </p> <p class="ui-content"> <ul class="new-list"> <li>tab内容新1</li> </ul> <ul class="hot-list"> <li>tab内容新2…</li> </ul> <ul class="video-list"> <li>tab内容新3…</li> </ul> </p> </p> <!-- --> </body> </html>
效果:
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
以上就是介绍一个纯css制作tab的实例代码的详细内容,更多请关注其它相关文章!