选项卡代码 php,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;

}

}

• class="selectspan1">租

• 优
• 产

22222

3333333

相关文章推荐：