标签：
<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>
标签：
原文地址：http://www.cnblogs.com/gchlcc/p/4658183.html
