Heim  >  Artikel  >  Web-Frontend  >  Code für die Tab-Implementierung in CSS

Code für die Tab-Implementierung in CSS

不言
不言Original
2018-08-03 09:28:262110Durchsuche

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(&#39;tag1&#39;,&#39;content1&#39;);this.blur();"class="selectli1"><span
                class="selectspan1">租</span></a></li>
                <li id="tag2"><a href="#" onclick="switchTag(&#39;tag2&#39;,&#39;content2&#39;);this.blur();"><span>优</span></a></li>
                <li id="tag3"><a href="#" onclick="switchTag(&#39;tag3&#39;,&#39;content3&#39;);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)

So verwenden Sie CSS, um den dynamischen Effekt einer farbverändernden Rotationsanimation zu erzielen

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn