Tab

css

.*{margin:0; padding:0;}
body{font-size:14px;line-height:2em;}
li{list-style: none;}
a{color:#666; text-decoration: none;}
a:hover{color:#f00;}
.clearfix {zoom:1}
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix li {float:left;width:100px;border:1px solid #000;text-align:center;background:red}
#slide_bar {width:408px;margin:0 auto}
.slide_under {width:406px;border:1px solid #000;}
.slide_box input[type="radio"] {display:none}
.slide_box .slide_under ul{display:none}
.slide_title label {display:block;cursor:pointer}
#a1:checked ~ .slide_title .a1,
#a2:checked ~ .slide_title .a2,
#a3:checked ~ .slide_title .a3,
#a4:checked ~ .slide_title .a4 {background:#000;color:#fff}
#a1:checked ~ .slide_under .a1-list,
#a2:checked ~ .slide_under .a2-list,
#a3:checked ~ .slide_under .a3-list,
#a4:checked ~ .slide_under .a4-list {display:block;}

html

     

          
          
          
          
          

              
 
                   

                        a1
                    
                   

                         a2
                    
                    

                         a3
                    
                   

                         a4
                    
               
            
   
            

               

                   
1
                   
1
                   
1
                   
1
               
               

                   
2
                   
2
                   
2
                   
2
               
               

                   
3
                   
3
                   
3
                   
3
               
               

                   
4
                   
4
                   
4
                   
4