（16）JS实现简单的选项卡

来源：互联网发布：d3.js 地图热力图编辑：程序博客网时间：2024/04/24 05:13

思路：

在选项卡中，选中的选项卡会高亮显示，这里使用yellow颜色代替，这里使用class添加相应的属性（此处显示黄色作为高亮显示）当然必须先获取当前的选项卡内容，于是为每个属性动态设置一个index属性，并且为每个选项卡按钮添加onclick事件，每个事件中处理过程是这样的：先将所有的class清除，也就是没有一个选项卡显示高亮显示的样式，将所有选项卡都隐藏起来，采用this，设置class名称为高亮显示的那个名称，从而使当前选项卡获得高亮显示的样式，并且将其display属性设置为block，即显示出来。

<!DOCTYPE HTML><!----><html><head><meta charset="utf-8"><title></title><style>#div1 .active{background:yellow;}#div1 div{width:200px;height:200px;background:#ccc;border:1px solid #999;display:none;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');var aBtn=oDiv.getElementsByTagName('input');var aDiv=oDiv.getElementsByTagName('div');for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;//为每个按钮标签设置一个index属性aBtn[i].onclick=function(){for(var i=0;i<aBtn.length;i++){aBtn[i].className='';//将所有的className置为空，即没有哪个是高亮显示是当前选项卡是哪个aDiv[i].style.display='none';//将当前的div全部隐藏起来}//alert(this.value);this.className='active';//此处只显示一个高亮，即选中的那个选项卡aDiv[this.index].style.display='block';//显示当前的选项卡，主要通过index确定选定的选项卡是哪个};}};</script></head><body><div id="div1"><input class="active" type="button" value="教育"/><input type="button" value="培训"/><input type="button" value="招生"/><input type="button" value="出国"/><div style="display:block;">1111</div><div>2222</div><div>3333</div><div>4444</div></div></body></html>

效果图：

0 0