css中选项卡实现的代码-css教程-PHP中文网

css中选项卡实现的代码

不言

发布： 2018-08-03 09:28:26

原创

2390人浏览过

这篇文章给大家介绍的文章内容是关于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>

登录后复制

相关文章推荐：

CSS样式有哪几种？css样式表的三种方式总结（附代码）

weenCompany闻名企业网站系统5.3.0 繁体中英文 UTF8

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3