How CSS implements tab switching for code sharing

tab page Switch function we have shared a lot of, this article we mainly and everyone in the CSS Implementation tab switch instance code, need friends can refer to, hope to help everyone.

1.hover

Moves into its parent element. Navi, triggers the mouse's hover state, adds the style to the parent element position:relative;z-index:1; This improves the level z-index. In the hierarchy of its child navigation content, "Son by Parent", the parent element level is high, its navigation content in the overlapping state appears on the top

<style>body,p{margin:0;} h2{margin:0;font-size:100%;}   Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;}. navi-tit{line-height:40px;text-align:center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;}. Navi-txt{width:572px;height:200px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;}. Navi_active{position:relative;z-index:1;} /* key code */.navi:hover{position:relative;z-index:1;}. Navi:hover. Navi-tit{background: #fff; border-bottom:none;}  </style><p class= "box" > <ul class= "nav" > <li class= "NavI navi_active" > 

2. Anchor Point

When you click the navigation header, trigger the target pseudo-class, change the corresponding navigation content level Z-index, so that the current navigation content in three navigation content wins, at the top of the display, while changing the current navigation title style



<style>body,p{margin:0;} h2{margin:0;font-size:100%;}   Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;}. box{width:572px;border:1px solid #999; overflow:hidden;}. Nav{margin-left: -1px;font:14px "Microsoft Jas Black"; Overflow:hidden;background-color: #f1f1f1;}. Navi{float:left;width:33.333%;box-sizing:border-box;position:relative;}. Navi-tit{position:absolute;top:0;left:0;right:0;box-sizing:border-box;line-height:40px;height:40px;text-align: center;cursor:pointer;border-left:1px solid #cecece; border-bottom:1px solid #cecece;}. Navi-txt{width:572px;height:200px;margin-top:40px;text-indent:2em;line-height:2;background: #fff;}. Ml1{margin-left:-100%;}. Ml2{margin-left:-200%;}. Navi_active{z-index:1;} /* key code */.navi-txt:target{position:relative;z-index:1;}. Navi-txt:target ~. Navi-tit{background: #fff; border-bottom:none;} </style><p class= "box" > <ul class= "nav" > <li class= "NavI navi_active" > <p class= "Navi-txt" ID= "KC" > Course content </p> <a class= "Navi-tit" href= "#kc" > Courses </a> </li> <li CLA ss= "NavI" > <p class= "navi-txt ml1" id= "XX" > Learning Plan content </p> <a class= "Navi-tit" href= "#x X "> Learning Plan </a> </li> <li class=" NavI "> <p class=" navi-txt ml2 "id=" JN "> Skills Atlas Content </p> <a class= "Navi-tit" href= "#jn" > Skill map </a> </li> </ul> &LT;/P&G T
3.radio

When you click the navigation header, trigger the checked pseudo-class, change the level of the corresponding navigation content z-index, so that the current navigation content in three navigation content wins, at the top of the display; At the same time, change the style of the current navigation title



<style>body,p{margin:0;} Ul{margin:0;padding:0;list-style:none;} A{text-decoration:none;color:inherit;} Input{margin:0;padding:0;border:none;}. box{width:572px;border:1px solid #999; font:14px "Microsoft Jas Black"; overflow:hidden;}. Nav-tit{margin-left: -1px;height:40px;line-height:40px;text-align:center;background-color: #f1f1f1; overflow: Hidden;}. nav-titi{box-sizing:border-box;float:left;width:33.333%;border-left:1px solid #cecece; border-bottom:1px Solid # Cecece;cursor:pointer;}. nav-txt{height:200px;}. Nav-txti{height:200px;display:block;width:100%;text-indent:2em; line-height:2;} /* key content */.nav-txt{overflow:hidden;}. Nav-titi:hover{background-color: #fff; border-bottom:none;} </style><p class= "box" > <nav class= "nav-tit" > <label class= "Nav-titi" for= "KC" > Course </la bel> <label class= "Nav-titi" for= "XX" > Study plan </label> <label class= "Nav-titi" for= "JN" > Skill Map    Spectrum </label> </nav> <nav class= "Nav-txt" >    <input class= "Nav-txti nav-txti_active" id= "KC" value= "course content" readonly> <input class= "Nav-txti" id= "XX" value= "Learning Plan content" readonly> <input class= "Nav-txti" id= "Jn" value= "Skill map content" Readonly> &LT;/NAV&GT;&LT;/P&G T