纯CSS实现tab选项卡切换
<!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
纯CSS实现tab选项卡切换的更多相关文章
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼
下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...
- CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
随机推荐
- Winform无边框窗体(FormBorderStyle属性设为None)自定义移动
为了界面的好看,有时候需要将窗体FormBorderStyle属性设为None,这样就可以根据自己的喜欢来设计界面.但这样窗体无法进行移动的.而且默认的窗体(FormBorderStyle=Sizab ...
- 利用自定义的AuthenticationFilter实现Basic认证
[ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证 很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前 ...
- 模板方法(Template)模式
模板方法(Template)模式 前言 前段时间在亚马逊买了一本<CLR>的书,当时搞活动买一送一,然后挑了一本<漫谈设计模式>,一位不相识的大牛写的,这几天闲来无事,翻了几页 ...
- The initialization of the CRM authentication pipline execution has failed
由于公司电路切换,昨天晚上不得不将服务器暂时关闭.早上重新开机时,发现开发环境连不上了.这可把我急坏了,大家可都等着开发呢. 于是查看服务器错误消息,发现时数据库连接连接不上. The initial ...
- iOS内存错误EXC_BAD_ACCESS的解决方法(message sent to deallocated instance)
iOS开发,最郁闷的莫过于程序毫无征兆地就崩溃了,用bt命令打出调用栈,给出的是一堆系统EXC_BAD_ACCESS的信息,根本没办法定位问题出现在哪里.通常这样的崩溃出现,原因一般就是:调用了已经释 ...
- 企业架构研究总结(33)——TOGAF架构内容框架之架构制品(上)
4. 架构制品(Architectural Artifacts) 架构制品是针对某个系统或解决方案的模型描述,与架构交付物和构建块相比,架构制品既不是架构开发方法过程各阶段的合约性产物,亦不是企业中客 ...
- js定义类或对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 支付宝移动支付开发详细教程服务端采用.net mvc webapi(C#)
转自:http://www.kwstu.com/ArticleView/netmvc_201511132005431321 最近开发手机app需要实现移动支付功能,由于考虑支付安全将支付宝生成签名写到 ...
- vs2008 试用版评估到期 vs2008试用版 升级正式版
心得: 解决Vs2008 试用版升级正式版 1.在控制面板里面找到vs2008的程序. 2.点击 更改删除按钮, 3.出现Vs2008的维护模式. 4.在此维护模式下,如果没有出现填写正版密匙的地方, ...
- 关于JdbcTemplate的queryForList返回值
通过spring的jdbctemplate返回的list其实封装的是需要通过如下方法得到里面的内容的 public void getAllUsers() { List allUsers = new A ...