Heim > Artikel > Web-Frontend > Code für die Tab-Implementierung in CSS
Der Inhalt dieses Artikels befasst sich mit dem Code für die Tab-Implementierung in CSS. Ich hoffe, er kann Freunden in Not helfen.
#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>
Empfohlene verwandte Artikel:
Was sind die CSS-Stile? Zusammenfassung der drei Methoden des CSS-Stylesheets (mit Code)
Das obige ist der detaillierte Inhalt vonCode für die Tab-Implementierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!