核心内容是使用单选框实现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页

【完】

 

 

 

 

技术
©2019-2020 Toolsou All rights reserved,
关于Navicat for mysql 的2003错误(精华)2020年8月2日 TypeScript 泛型的使用Three.js - OrbitControls 轨道控件的围绕目标 target 参数Dijkstra算法的Python实现-最短路径问题python 动态规划求解单源最短路径【JAVA】【华为校园招聘笔试-软件】2020-09-09PHP打印输出logVue开发小技巧STM32红外寻迹小车前端向后台传值的5种方式总结