纯CSS实现tab选项卡切换
2024-08-25 02:12:09
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>纯CSS实现tab选项卡切换</title> <style media="screen"> * { box-sizing: border-box; } body { margin: 0; background-color: #2DB7F5; color: #08172F; position: absolute; height: 100%; width: 100%; overflow: hidden; } input[name='toggle'] { display: none; } nav { margin-top: 20px; } nav ul { position: relative; padding: 0; margin: 0; list-style: none; font-size: 0; } nav ul { height: 40px; line-height: 40px; text-align: center; } nav ul li { display: inline-block; width: 33.33%; height: 100%; font-size: 14px; } nav ul li label { display: inline-block; width: 100%; height: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #1F5AA3; color: #fff; } main { position: absolute; height: 200px; width: 100%; background: white; color: #1F5AA3; padding: 10px } .container { display: none; } #tab1:checked~nav label[for='tab1'] { background-color: #fff; color: #1F5AA3; } #tab1:checked~main .tab1-container { display: block; } #tab2:checked~nav label[for='tab2'] { background-color: #fff; color: #1F5AA3; } #tab2:checked~main .tab2-container { display: block; } #tab3:checked~nav label[for='tab3'] { background-color: #fff; color: #1F5AA3; } #tab3:checked~main .tab3-container { display: block; } </style> </head> <body> <input type="radio" name="toggle" id="tab1" checked/> <input type="radio" name="toggle" id="tab2" /> <input type="radio" name="toggle" id="tab3" /> <nav> <ul> <li><label for="tab1">tab1</label></li> <li><label for="tab2">tab2</label></li> <li><label for="tab3">tab3</label></li> </ul> </nav> <main> <section class="container tab1-container"> <p> 这里是第一个tab页的内容 </p> </section> <section class="container tab2-container"> <p> 这里是第二个tab页的内容 </p> </section> <section class="container tab3-container"> <p> 这里是第三个tab页的内容 </p> </section> </main> </body> </html>
一直都是用配合着js实现的,今天看到群里发了这个,还真是眼前一亮,学习了。
来自群里大神的git:https://github.com/Jiasm/qq-share/blob/master/css/tab/index.html
最新文章
- eclipse 突然 一直在loading descriptor for XXX (XXX为工程名)Cancel Requested
- Chrome
- MVC 前台向后台传输数据
- 运行java -version报cannot restore segment prot after reloc: Permission denied
- windows笔记-一个简单的windows GUI应用程序
- linux find grep使用
- Eclipse配置Hadoop开发环境
- TreeMap cannot be cast to java.lang.Comparable
- 第四节,Linux基础命令
- struts2 之 struts2类型转换
- HDU1411 欧拉四面体
- poj 3070 &;&; nyoj 148 矩阵快速幂
- 正则表达式与grep
- ButterKnife注解框架详解
- JVM优化系列之一(-Xss调整Stack Space的大小)
- 采用Oracle的dbms_obfuscation_toolkit的加密
- 转载SQL容易产生的错误问题
- Linux查看操作系统版本
- 设置、读取、删除cookie
- What to do next to activate this settings for already existing users
热门文章
- LeetCode之Reverse Words in a String
- leetcode[88] Gray Code
- SD卡添加文件,添加不进去,报 Read-only file system错误
- 动态注册HttpModule
- Effective C++(18) 让接口更容易被正确使用,不易被误用
- Ajax+Ashx实现以及封装成控件的实现
- github 出现 Permission denied (publickey)的解决
- Debian 7.1设置中文环境
- JS树型菜单
- hive left outer join的问题