老邦 与人为善 与己方便...
简单js选项卡切换效果
发表于: | 分类: 低端技术 | 评论:0

今天一小朋友问我选项卡切换咋弄,花了几分钟写了个给他,灰常初级的,现贴到博客,正好很久没更新博客更新下。呵呵呵。

如图

[caption id="attachment_508" align="aligncenter" width="346"]简单js选项卡切换 简单js选项卡切换[/caption]

源码如下:

[code]
<!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=utf-8" />
<title>选项卡</title>
<style>
body{ margin:0px; padding:0px; font-size:12px;}
*{ margin:0; padding:0;}
.radbox{ margin:20px auto; width:306px;}
.radbox ul{ list-style:none; border:#666 solid 1px; border-right:none; overflow:hidden;}
.radbox ul li{border-right:#666 solid 1px; width:60px; height:30px; line-height:30px; float:left; text-align:center; cursor:pointer;}
.radbox ul li.ov{ background-color:#666; color:#FFF;}
.radbox ul li.ot{ background-color:none; color:#000}
#radCont{ border:#666 solid 1px; border-top:none; width:304px; overflow:hidden; height:500px; overflow:hidden;}
#radCont div{width:304px;height:500px;}
</style>

</head>

<body>
<div class="radbox">
<ul id="radMeau"><li class="ov">选项卡一</li><li>选项卡二</li><li>选项卡三</li><li>选项卡四</li><li>选项卡五</li></ul>
<div id="radCont">
<div>
内容一
</div>
<div style="display:none">
内容二
</div>
<div style="display:none">
内容三
</div>
<div style="display:none">
内容四
</div>
<div style="display:none">
内容五
</div>

</div>
</div>
<!--//radbox-->
<script>
var getRadArr=document.getElementById("radMeau").getElementsByTagName("li");//得到选项卡菜单
var getRadCont=document.getElementById("radCont").getElementsByTagName("div");//得到所有选项卡内容
var index=0;//当前切换时第几个选项卡。默认第一个
for(i=0;i<getRadArr.length;i++){
getRadArr[i].id=i;//这个赋值没有实际意义,后面会用其作为参数使
getRadArr[i].onclick=function(){//给选项卡赋值方法。此处是onclick 单击方法,onmouseover也是可以滴
if(index!=this.id){ //第n次点击的选项卡和第n+1次点击的是否是同一个
this.className="ov";
getRadCont[this.id].style.display="block";//显示对应内容
getRadArr[index].className="ot"; //清空上一次点击选项卡的效果
getRadCont[index].style.display="none"; //影藏上一次选项卡内容
index=this.id;
}
}
}
</script>
</body>
</html>
[/code]


添加新评论


TOP