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

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

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

一、基础结构

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

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

    

        

            

                第一页
                
道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过手，青史几行名姓，北邙无数荒丘，前人播种后人收，说甚龙争虎斗
            
            

                第二页
                
难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖难难难道德玄，不对知音不可谈，对了知音谈几句，不对知音枉费舌尖
            
            

                第三页
                
诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。诸恶莫作，众善奉行，远报儿女，近在己身，苍天有眼，报应循环，但行好事，莫问前程。
            
        
    

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

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

现在该写样式了：

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

【完】