CSS Implementation Tab Layout example display

The following small series to bring you a CSS to implement the tab layout of a simple example (must see). Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

First, the Layout method

1. Content and Tab separation

<p class= "Container" >   <p class= "tab-content" >     <p id= "item1" class= "item" > Content 1</p>     <p id= "item2" class= "item" > Content 2</p> <p id=     "item3" class= "item" > Content 3</p>     <p ID = "ITEM4" class= "item" > Content 4</p>   </p>   <p class= "Tab-control" >     <ul>        < Li><a href= "#item1" > Content 1</a></li>        <li><a href= "#item2" > Content 2</a></li >        <li><a href= "#item3" > Content 3</a></li>        <li><a href= "#item4" > Content 4 </a></li>     </ul>   </p></p>

ul,li{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;}. tab-content{  width:100%;  height:80%;  Overflow:hidden;}. Tab-content. item{  width:100%;  height:100%;}. tab-control{  width:100%;  height:20%;}. Tab-control ul{  height:100%;}. Tab-control li{  width:25%;  height:100%;  Float:left;  border:1px solid silver;  Box-sizing:border-box;  Background-color:white;  Cursor:pointer;}. Tab-control li:hover{  background-color: #7b7474}.tab-control a{  display:inline-block;  width:100%;  height:100%;  line-height:100%;  Text-align:center;  Text-decoration:none;}. Tab-control a::after{  content: "";  Display:inline-block;  height:100%;  Vertical-align:middle;}. Tab-content. item:target{  Background:yellow;}

2. Content and TAB integration

<p class= "Container" >   <ul>     <li class= "Item Active" >       <p class= "title" >1</p >       <p class= "content" >1</p>     </li>     <li class= "Item" >       <p class= "title" >2</p>       <p class= "Content ml1" >2</p>     </li>     <li class= "Item" >       <p class= "title" >3</p>       <p class= "Content ml2" >3</p>     </li>     <li Class= "Item" >       <p class= "title" >4</p>       <p class= "Content ml3" >4</p>     </ Li>   </ul></p>

ul,li,p{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;  border:1px solid silver;}. Container ul{  width:100%;  height:100%;  Overflow:hidden;}. Container. item{  float:left;  width:25%;  height:100%;  Background-color:white;}. Container. Item. title{  line-height:40px;  border:1px solid silver;  Box-sizing:border-box;  Text-align:center;  Cursor:pointer;}. Container. Item. content{  width:400%;  height:100%;  Background-color:yellow;}. ml1{  margin-left:-100%;}. ml2{  margin-left:-200%;}. ml3{  margin-left:-300%;}. active{  position:relative;  Z-index:1}.container. item:hover{  position:relative;  Z-index:1}.container. Item:hover. title{  Border-bottom:none;  Background-color:yellow;}

Using negative margin, the content area is aligned, then the content is added to the background color, avoiding different tab corresponding area perspective overlap.

Second, CSS implementation of interactive

1, the Anchor point realization (target)

(1) for layout one:item is arranged from top to bottom, parent element tab-content plus Overflow:hidden. With the anchor point, when you click on a different a tag, the item with the corresponding ID will switch to the Tab-content view, then use the hover to add a toggle style to the tab button.

<p class= "Container" >   <p class= "tab-content" >     <p id= "item1" class= "item" > Content 1</p>     <p id= "item2" class= "item" > Content 2</p> <p id=     "item3" class= "item" > Content 3</p>     <p ID = "ITEM4" class= "item" > Content 4</p>   </p>   <p class= "Tab-control" >     <ul>        <li><a href= "#item1" > Content 1</a></li>        <li><a href= "#item2" > Content 2</a> </li>        <li><a href= "#item3" > Content 3</a></li>        <li><a href= "#item4" > Content 4</a></li>     </ul>   </p></p>

ul,li{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;}. tab-content{  width:100%;  height:80%;  Overflow:hidden;}. Tab-content. item{  width:100%;  height:100%;}. tab-control{  width:100%;  height:20%;}. Tab-control ul{  height:100%;}. Tab-control li{  width:25%;  height:100%;  Float:left;  border:1px solid silver;  Box-sizing:border-box;  Background-color:white;  Cursor:pointer;}. Tab-control li:hover{  background-color: #7b7474}.tab-control a{  display:inline-block;  width:100%;  height:100%;  line-height:100%;  Text-align:center;  Text-decoration:none;}. Tab-control a::after{  content: "";  Display:inline-block;  height:100%;  Vertical-align:middle;}

The above method only uses the anchor point switch, not using: target. Modify CSS

ul,li{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;}. tab-content{  position:relative;  width:100%;  height:80%;  Overflow:hidden;}. Tab-content. item{  Position:absolute;  left:0;  top:0;  width:100%;  height:100%;}. tab-control{  width:100%;  height:20%;}. Tab-control ul{  height:100%;}. Tab-control li{  width:25%;  height:100%;  Float:left;  border:1px solid silver;  Box-sizing:border-box;  Background-color:white;  Cursor:pointer;}. Tab-control li:hover{  background-color: #7b7474}.tab-control a{  display:inline-block;  width:100%;  height:100%;  line-height:100%;  Text-align:center;  Text-decoration:none;}. Tab-control a::after{  content: "";  Display:inline-block;  height:100%;  Vertical-align:middle;}. Tab-content. item:target{  z-index:1;  Background-color:yellow;}

The item uses absolute positioning and then uses: Target modifies the element z-index to achieve the toggle effect (it can also be achieved by controlling the display of the element)

(2) for layout two:

<p class= "Container" >   <ul>     <li class= "Item Active" id= "item1" >       <p class= "title" ><a href= "#item1" >1</a></p>       <p class= "content" >1</p>     </li>     <li class= "Item" id= "ITEM2" >       <p class= "title" ><a href= "#item2" >2</a></p>       <p class= "Content ml1" >2</p>     </li>     <li class= "item" id= "Item3" >       <p class= "title" ><a href= "#item3" >3</a></p>       <p class= "Content ml2" >3</p>     </ li>     <li class= "item" id= "ITEM4" >       <p class= "title" ><a href= "#item4" >4</a></ p>       <p class= "Content ml3" >4</p>     </li>   </ul></p>

ul,li,p {  margin:0;  padding:0;  List-style:none;}. container {  width:400px;  height:300px;  Background-color:silver;  border:1px solid silver;}. Container ul {  width:100%;  height:100%;  Overflow:hidden;}. Container. Item {  float:left;  width:25%;  height:100%;  Background-color:white;}. Container. Item. title {  line-height:40px;  border:1px solid silver;  Box-sizing:border-box;  Text-align:center;  Cursor:pointer;}. Container. Item a {  display:inline-block;  width:100%;  height:100%;  Text-decoration:none;}. Container. Item. content {  width:400%;  height:100%;  Background-color:yellow;}. ML1 {  margin-left:-100%;}. ML2 {  margin-left:-200%;}. ML3 {  margin-left:-300%;}. active {  position:relative;  Z-index:1}.container. item:target {  position:relative;  Z-index:1}.container. Item:target. title {  Border-bottom:none;  Background-color:yellow;}

2, hover realization

(1) for layout one:

Not easy to implement through CSS

(2) for layout two:

<p class= "Container" >   <ul>     <li class= "Item Active" >       <p class= "title" >1</p >       <p class= "content" >1</p>     </li>     <li class= "Item" >       <p class= "title" >2</p>       <p class= "Content ml1" >2</p>     </li>     <li class= "Item" >       <p class= "title" >3</p>       <p class= "Content ml2" >3</p>     </li>     <li Class= "Item" >       <p class= "title" >4</p>       <p class= "Content ml3" >4</p>     </ Li>   </ul></p>

ul,li,p{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;  border:1px solid silver;}. Container ul{  width:100%;  height:100%;  Overflow:hidden;}. Container. item{  float:left;  width:25%;  height:100%;  Background-color:white;}. Container. Item. title{  line-height:40px;  border:1px solid silver;  Box-sizing:border-box;  Text-align:center;  Cursor:pointer;}. Container. Item. content{  width:400%;  height:100%;  Background-color:yellow;}. ml1{  margin-left:-100%;}. ml2{  margin-left:-200%;}. ml3{  margin-left:-300%;}. active{  position:relative;  Z-index:1}.container. item:hover{  position:relative;  Z-index:1}.container. Item:hover. title{  Border-bottom:none;  Background-color:yellow;}

3, Label and: checked implementation

(1) for layout one:

<p class= "Container" >  <p class= "tab-content" >    <input type= "Radio" name= "Item" class= " Radio-item "id=" item1 "checked/>    <p class=" item "> Content 1</p> <input type=    " Radio "name=" Item " class= "Radio-item" id= "item2"/>    <p class= "item" > Content 2</p> <input type=    "Radio" name= "Item" class= "Radio-item" id= "Item3"/>    <p class= "item" > Content 3</p> <input type=    "Radio" name= "Item" class= "Radio-item" id= "Item4"/>    <p class= "item" > Content 4</p>  </p>  <p class= " Tab-control ">    <ul>      <li><label for=" item1 "> Content 1</label></li>      < Li><label for= "item2" > Content 2</label></li>      <li><label for= "Item3" > Content 3</ label></li>      <li><label for= "ITEM4" > Content 4</label></li>    </ul>  </p></p>

Ul,li {margin:0;  padding:0; List-style:none;}.  container {width:400px;  height:300px; Background-color:silver;}.  tab-content {position:relative;  width:100%;  height:80%; Overflow:hidden;}  input {margin:0; width:0;}.  Tab-content. item {position:absolute;  left:0;  top:0;  width:100%; height:100%;}.  Tab-control {width:100%; height:20%;}. Tab-control ul {height:100%;}.  Tab-control Li {width:25%;  height:100%;  Float:left;  border:1px solid silver;  Box-sizing:border-box; Background-color:white;}.  Tab-control li:hover {background-color: #7b7474}.tab-control label {display:inline-block;  width:100%;  height:100%;  line-height:100%;  Text-align:center;  Text-decoration:none; Cursor:pointer;}.  Tab-control label::after {content: "";  Display:inline-block;  height:100%; Vertical-align:middle;}. Tab-content. radio-item{Display:none;}.  Tab-content. radio-item:checked+.item {z-index:1; Background-color:yellow;}

Use css:checked with + (select the element immediately after another element, and both have the same parent element) selector.

(2) for layout two:

<p class= "Container" > <ul> <li class= "Item Active" > <input type= "Radio" Name= "Item" Class = "Radio-item" id= "item1" checked/> <label class= "title" for= "Item1" >1</label> <p class= "cont Ent ">1</p> </li> <li class=" Item "> <input type=" Radio "name=" Item "class=" Radio-item "Id=" item2 "/> <label class=" title "for=" item2 ">2</label> <p class=" Content ml1 ">2</p > </li> <li class= "Item" > <input type= "Radio" name= "Item" class= "Radio-item" id= "Item3"/&       Gt     <label class= "title" for= "Item3" >3</label> <p class= "Content ml2" >3</p> </li> <li class= "Item" > <input type= "Radio" name= "Item" class= "Radio-item" id= "Item4"/> <label class = "title" for= "Item4" >4</label> <p class= "Content ml3" >4</p> </li> </ul></p >

ul,li,p{  margin:0;  padding:0;  List-style:none;}. container{  width:400px;  height:300px;  Background-color:silver;  border:1px solid silver;}. Container ul{  width:100%;  height:100%;  Overflow:hidden;}. Container. item{  float:left;  width:25%;  height:100%;  Background-color:white;}. Container. Item. title{  Display:inline-block;  width:100%;  line-height:40px;  border:1px solid silver;  Box-sizing:border-box;  Text-align:center;  Cursor:pointer;}. Container. Item. content{  position:relative;  width:400%;  height:100%;  Background-color:yellow;}. ml1{  margin-left:-100%;}. ml2{  margin-left:-200%;}. ml3{  margin-left:-300%;}. radio-item{  Display:none;}. radio-item:checked~.title{  Background-color:yellow;  Border-bottom:none;}. radio-item:checked~.content{  Background-color:yellow;  Z-index:1;}