纯html+css实现点击切换tab页

核心内容是使用单选框实现css的点击事件

大致分析一下dom结构，被切换的tab页和按钮放在同一个li内一共需要切换三个页面，也就是说需要有三个li，首先写一下基本dom结构

一、基础结构

我使用的是VScode的软件，可以使用快捷创建dom，就像使用css选择器一样的使用

建立一个类名为box的div，有一个ul的子节点，里面有三个li，li里面包含一个input，一个label 一个div，写完之后按tab键，创建基础结构：

    <div class="box"><ul><li><input type="radio" name="check" id="active1" checked><label for="active1">第一页</label><div>道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗</div></li><li><input type="radio" name="check" id="active2"><label for="active2">第二页</label><div>难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖</div></li><li><input type="radio" name="check" id="active3"><label for="active3">第三页</label><div>诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。</div></li></ul></div>

添加文字内容，和tab标签的内容

active的后缀是我自己加的，不知道怎么自动加，如果有知道的同学可以在评论区教一下，谢谢，

现在该写样式了：

<style>/* 清样式，如果是项目中，不推荐使用通配符来清样式，建议使用标签清样式，通配符清样式会增加页面压力 */*{margin:0;padding:0;}/* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */.box{width:50vw;height:50vh;margin:0 auto;}/* 清除li样式 */ul,li{list-style: none;}/* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 *//* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */ul{position:relative;display:flex;}/* 将三个li宽度平分，高度60px */li{flex:1;height:60px;}/* input隐藏 */input{display:none;}/* 设置input的下一个节点label的样式 */input+label{display:block;width:100%;height:100%;background:#ccc;font-size:18px;text-align: center;line-height: 60px;color:#333;}/* 设置div内容的基础样式 隐藏内容div*/input+label+div{display:none;position: absolute;left:0;top:60px;}/* input选中状态时候对应的label的样式 */input:checked+label{background: #333333;color:#fff;}/* input选中时候显示对应的div */input:checked+label+div{display:block;}</style>

于是就出现了纯css切换tab页

【完】

纯html+css实现点击切换tab页相关推荐

html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单
纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
纯HTML,CSS实现点击图片，显示内容
2019独角兽企业重金招聘Python工程师标准>>> 之前实现过用纯js实现轮播图切换,以及点击图片显示相关介绍信息,现在用纯HTML,CSS实现一个小功能,这个是跟一个美国朋友学 ...
使用css实现点击切换效果
使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版) 首先先制作一个容器,用来容纳所显示的内容: HTML代码: <html></html> ...
记录QT在实时显示摄像头数据时候切换TAB页出现异常
最近在做一个项目,用一个TAB做页控件,里面放了不同的widget,其中Awidget是实时输出摄像头数据,是通过opencv转qimage,一开始正常,当我快速在A与B之间切换时就出现了如下错误: ...
html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
切换tab页时，tab页中的echart变形问题
本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...

纯html+css实现点击切换tab页

纯html+css实现点击切换tab页相关推荐

最新文章

热门文章