CSS Implementation Tab Layout example display

Source: Internet
Author: User
Tags control label
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;}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.