HTML sample code for implementing tab switching
|
Tab switching is also a common technology in projects. Generally, tab switching is implemented using js or jq. Today, we will introduce two methods of implementing tab switching using only CSS: Method 1: Principle: The corresponding div is displayed through the associated attributes of the label tag and the single-select type of the input 1. Create a div with a class name of wrap as a container 2. Create four label tags, which will serve as tab switching items 3. Create a span tag (navigation content) and an input tag (to select and unselect) in each label. The type is radio. Also create a div as the content box when the navigation item is clicked. It should be noted that the name of the input tag must be the same. I named it tab The final HTML is as follows:
<div class="wrap">
<label>
<span>home</span>
<input type="radio" name="tab" checked>
<div>home-page</div>
</label>
<label>
<span>list</span>
<input type="radio" name="tab">
<div>list-page</div>
</label>
<label>
<span>news</span>
<input type="radio" name="tab">
<div>news-page</div>
</label>
<label>
<span>mine</span>
<input type="radio" name="tab">
<div>mine-page</div>
</label>
</div>The important CSS is to set the width of the input to 0 so that the small dot on the input is not realistic, and to use the click of the navigation item to realize the checked input through the association of the label, and then realize the display of the corresponding div through input:checked+div{display:block}
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
margin: 20px auto;
width: 403px;
height: 600px;
border:1px solid brown;
position: relative;
}
label{
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height:30px;
border-right: 1px solid brown;
border-bottom: 1px solid brown;
}
label:nth-of-type(4){
border-right: none;
}
label span{
cursor: pointer;
}
label div{
width: 403px;
height: 568px;
position: absolute;
left: 0;
top: 31px;
background: #eeeeee;
display: none;
}
label input{
width: 0;
}
input:checked+div{
display: block;
}
</style>
Method 2: Principle: Switching is achieved through the anchor point of the a tag, that is, the href path of a is to switch the div id 1. Create a div with a class name of wrap as a container 2. Create a div with a class name of nav, and create four a tags inside it. The href of the a tag is the id of the div to be switched to. 3. Create a container with the class name sh that is a sibling of nav to place the switching div 4. Create a div to display the content, and the ids correspond to the a tags above The final code is as follows:
<div class="wrap">
<div class="nav">
<a href="#home">home</a>
<a href="#list">list</a>
<a href="#news">news</a>
<a href="#mine">mine</a>
</div>
<div class="sh">
<div id="home">home-page</div>
<div id="list">list-page</div>
<div id="news">news-page</div>
<div id="mine">mine-page</div>
</div>
</div>
CSS style setting, that is, set the div with class name sh to display:none; then use div:target{display:block} to display the selected item
<style type="text/css">
*{margin: 0;padding: 0}
.wrap{
width: 400px;
height: 600px;
border: 1px solid brown;
margin: 20px auto;
position: relative;
}
.nav{
width: 100%;
height: 30px;
}
.nav a{
width: 99px;
height: 30px;
text-align: center;
line-height: 30px;
border-right: 1px solid brown;
border-bottom: 1px solid brown;
float: left;
text-decoration: none;
color:black;
}
.sh{
width: 400px;
height: 569px;
position: absolute;
left: 0;
top:31px;
background: #eeeeee;
}
.sh div{
display: none;
text-align: center;
}
.sh div:target{
display: block;
}
</style>
This is the end of this article about the sample code for implementing tab switching in html. For more relevant html tab switching content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: A brief discussion on mobile terminal adaptation
>>: Detailed explanation of the difference between JavaScript spread operator and rest operator
Recommend
In-depth understanding of MySQL master-slave replication thread state transition
Preface The basic principle of MySQL master-slave...
base target="" specifies the target of the base link to open the frame
<base target=_blank> changes the target fram...
Summary of bootstrap learning experience-css style design sharing
Due to the needs of the project, I plan to study ...
Detailed example of how to implement transaction commit and rollback in mysql
Recently, we need to perform a scheduled migratio...
Record the process of connecting to the local Linux virtual machine via SSH
Experimental environment: Physical machine Window...
How to implement the prototype pattern in JavaScript
Overview The prototype pattern refers to the type...
Several common methods for setting anchor positioning in HTML
There are several ways I know of to set anchor pos...
Vue3+TypeScript encapsulates axios and implements request calls
No way, no way, it turns out that there are peopl...
Example of how to change the line spacing of HTML table
When using HTML tables, we sometimes need to chan...
How to delete a MySQL table
It is very easy to delete a table in MySQL, but y...
The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory
1. Virtual Machine Preparation 1. Create a new vi...
Three ways to implement waterfall flow layout
Preface When I was browsing Xianyu today, I notic...
What are inline elements and block elements?
1. Inline elements only occupy the width of the co...
Detailed explanation of how to build phalcon environment under nginx server on centos7 system
This article describes how to build a phalcon env...
Advantages and disadvantages of Table layout and why it is not recommended
Disadvantages of Tables 1. Table takes up more byt...