选项卡实现

最新推荐文章于 2022-10-24 17:31:20 发布

kksxl

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量141

点赞数

分类专栏： HTML 文章标签： XHTML

HTML 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">

</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; 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;
}
}
</script>
</head>

<body>
<div id="container">
<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>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>选项四</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>选项五</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>NBA</p>乔丹</div>
<div id="content2" class="hidecontent">韦德</div>
<div id="content3" class="hidecontent">詹姆斯</div>
<div id="content4" class="hidecontent">科比</div>
<div id="content5" class="hidecontent">保罗</div>
</div>

</div>
</body>
</html>