This article introduces you to the article on the CSS tab implementation of the Code, there is a good reference value, I hope to help the needy friends.
#title {height:30px;width:400px;} #title Li {float:left;list-style-type:none;height:30px;width:132px;line-height:30px;text-align:center; margin-right:1px;} #title a {text-decoration:none;display:block;width:auto;color:black;} #title a span{display:block;padding:0 15px 0 15px;} #title #tag1 a:hover {color: #ffffff; Background-color: #16a085; width:auto;} #title #tag2 a:hover {color: #ffffff; Background-color: #16a085; width:auto;} #title #tag3 a:hover {color: #ffffff; Width:auto;background-color: #16a085;} #title A. Selectspan1, #title A. selectspan2, #title A. selectspan3 {display:block;background-color: #84AF9B;p adding:0 15 px 0 15px;} #content ul {margin:10px;} #content li {margin:5px;} #content {height:300px;padding-top:20px;}. Content1,.content2,.content3 {border-top-color: #84AF9B; border-top-style:solid;}. hidecontent {display:none;}
function Switchtag (tag,content) {//alert (tag);//alert (content); for (i=1; I &l t;4; i++) {if ("tag" +i==tag) {document.getElementById (tag). getElementsByTagName ("a") [0].classname= "Selectli" +i; document.getElementById (TAG). getElementsByTagName ("a") [0].getelementsbytagname ("span") [0].classname=] Selectspan "+I;} Else{document.getelementbyid ("tag" +i). getElementsByTagName ("a") [0].classname= "";d Ocument.getelementbyid ("tag" + i). getElementsByTagName ("a") [0].getelementsbytagname ("span") [0].classname= "";} if ("content" +i==content) {document.getElementById (content). Classname= "";} Else{document.getelementbyid ("Content" +i). Classname= "Hidecontent";} document.getElementById ("Content"). classname=content;}}
<div id= "title" > <ul> <li id= "Tag1" > <a href= "#" onclick= "Switchtag (' Tag1 ', ' content1 '); This.blur ();" class= "Selectli1" ><span class= "selectspan1" > Rent </span></a></li> < Li id= "tag2" ><a href= "#" onclick= "Switchtag (' Tag2 ', ' Content2 '); This.blur ();" ><span> excellent </span></a></li> <li id= "tag3" ><a href= "#" onclick= "Switchtag (' Tag3 ', ' content3 '); This.blur (); " ><span> production </span></a></li> </ul> </div> <div id= "Content" class= "Content1" ></div><div id= "Content2" class= "Hidecontent" >22222</div> <div id= "Content3" class= "hidecontent" >3333333</DIV>