The core content is to use the radio box to realize css Click events for

Let's have a general analysis dom structure , Switched tab Page and button in the same place li within There are three pages to switch , That is to say, there need to be three li, Let's start with the basics dom structure

One , Infrastructure

I use VScode Software for , Can be created using shortcuts dom, It's like using css Selector like use

Create a class named box Of div, There is one ul Children of , There are three in it li,li It contains a input, One label One div, Press after writing tab key , Create infrastructure :
<div class="box"> <ul> <li> <input type="radio" name="check" id="active1"
checked><label for="active1"> first page </label>
<div> Three emperors and five emperors of morality , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some names in the history of Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , On the morality of fighting between the dragon and the tiger , Fame after Xia, Shang and Zhou , Five tyrants and seven heroes make trouble in spring and Autumn , In a flash , Some surnames in Qing Dynasty , Countless barren hills in Beimang , The former sows and the later harvests , It's a fierce fight </div>
</li> <li> <input type="radio" name="check" id="active2"><label
for="active2"> Page 2 </label>
<div> It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , It's hard to waste words on a bosom friend. It's hard to be moral , No, we can't talk about confidants , Talk to a bosom friend , Don't waste your tongue on a bosom friend </div>
</li> <li> <input type="radio" name="check" id="active3"><label
for="active3"> Page 3 </label>
<div> every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future . every form of evil cannot be done , All good deeds , Far report to children , Close to yourself , Heaven has eyes , Retribution cycle , But do good , Don't ask about the future .</div>
</li> </ul> </div>
Add text content , and tab Content of label

active I added the suffix of , I don't know how to add it automatically , If you know something, you can teach it in the comment area , thank you ,

Now it's time to style :
<style> /* Qing style , If it is in the project , Wildcard characters are not recommended for style cleansing , Recommended label cleaning style , Wildcard clear style will increase page pressure */ *{ margin:0;
padding:0; } /* Half the screen width , Half the screen height , Then Center */ .box{ width:50vw; height:50vh;
margin:0 auto; } /* eliminate li style */ ul,li{ list-style: none; } /*
take ul Relative positioning , The purpose is to make the content div Relative in absolute positioning ul location , Otherwise it will be relative body location */ /* ul Elastic box , The purpose is to li Row crosswise , You can also li Floating or in line block
*/ ul{ position:relative; display:flex; } /* Three li Width bisection , height 60px */ li{ flex:1;
height:60px; } /* input hide */ input{ display:none; } /* set up input Next node of label Style of */
input+label{ display:block; width:100%; height:100%; background:#ccc;
font-size:18px; text-align: center; line-height: 60px; color:#333; } /*
set up div Basic style of content Hide content div*/ input+label+div{ display:none; position: absolute;
left:0; top:60px; } /* input Corresponding to the selected state label Style of */ input:checked+label{
background: #333333; color:#fff; } /* input Display the corresponding div */
input:checked+label+div{ display:block; } </style>
So pure css switch tab page

【 finish 】

 

 

 

 

Technology
©2019-2020 Toolsou All rights reserved,
Python realization switch method Determine whether the current object is an array 4 Methods git Pull the remote branch and switch to it Novices play hiss HI3520D Development board ( One , upgrade ) Shortest path Dijkstra (Python3) common 5 species JAVA Runtime exception mysql Recursively finds all child nodes of the parent class python Dynamic programming for single source shortest path rk3399_android7.1 debugging USB Summary of Bluetooth module springboot Multi profile configuration