您的位置：首页 > Web前端 > JavaScript

js 选项卡实现

2015-07-19 09:35 543 查看

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div2 div{
width:500px;
height:300px;
background:#999;
border:1px solid black;
display:none;
}
#div1 input{
width:50px;
height:30px;
border:none;
}
.bgcolor{
background:blue;
}
</style>
<script>
window.onload=function()//执行JS之前，要保证默认（第一个）按钮有class属性，并且按钮对应选显卡的display属性为block
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');//提取按钮的数组
var oDiv1=document.getElementById('div2');
var aDiv=oDiv1.getElementsByTagName('div');//提取选项卡的数组
for(var i=0;i<aBtn.length;i++)//外层循环用来给每个按钮添加事件
{
aBtn[i].onclick=function()//添加事件
{
for(var i=0;i<aBtn.length;i++)//内层循环
{
aBtn[i].index=i;//给数组添加序列号
aBtn[i].className='';//在执行事件之前将所有input的class属性清空
aDiv[i].style.display='none';//在执行事件之前将所有选项卡的display属性改为none
}
this.className='bgcolor';//清空完之后，让this（当前发生事件的按钮）的class属性重新定义
aDiv[this.index].style.display='block';///清空完之后，让发生事件所对应按钮的选项卡display属性定义为block
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="bgcolor" type="button" value="新闻"/>
<input type="button" value="体育"/>
<input type="button" value="财经"/>
<input type="button" value="军事"/>
</div>
<div id="div2">
<div style="display:block;">新闻啊新闻，好新啊好新</div>
<div>体育啊体育，好体啊好体</div>
<div>财经啊财经，好财啊好财</div>
<div>军事啊军事，好军啊好军</div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航