css中選項卡實現的代碼

這篇文章給大家介紹的文章內容是關於css中選項卡實現的代碼，有很好的參考價值，希望可以協助到有需要的朋友。

#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;padding: 0 15px 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 <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="";document.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">租</span></a></li>                <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>優</span></a></li>                <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>產</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>