Javascript实战之案例1——实现选项卡效果

来源：互联网发布：linux下禅道部署方法编辑：程序博客网时间：2024/06/05 00:48

1.实现选项卡，即在进行按钮点击时，一个div能根据button的不同实现不同的效果；

要求（1）.不同的div(对应的value值不同)，css样式相同，显示的内容不同；

例如：在body中的内容——

<input class="active" type="button" value="教育">

<input type="button" value="科技">

<input type="button" value="生活">

<div style="display:block;">1111</div>

<div>222</div>

<div>333</div>

（2）将上述内容它们放在同一个div大容器内；

<div id="div1">

....

</div>

2.实现选项卡，

（1）首先取得每个元素，前提必须在页面加载的情况之下；

例如——<head></head>中加载的javascript的内容，如下：

<script>

window.onload=function(){

var oDiv=docuemnt.getElementById('div1');

var oBtn=oDiv.getElementsByTagName('input');

var aDiv=oDiv.getElementsByTagName('div');

}

</script>

（2）取得元素时，要得到当前的元素，即“遍历”当前的元素，同时采用“this”关键字进行；

在上述代码的基础上，进行编写，如下：

for(var i=0;i<oBtn.length;i++){

oBtn[i].onclick=function(){

for(var i=0;i<oBtn.length;i++){

oBtn[i].className="";

}

this.className="active";

}

解析：（1）点击某个按钮事件时，先把其他未点击的按钮显示为null的状态，

再把active对应的类添加到当前点击的按钮上，即“this”关键字；

（2）this关键字：指向当前点击对象的类；

（3）实现选项卡效果时，要遍历每一个input按钮元素，采用index来进行，

index只能在javascript中使用，而在css中会出现错误。

将上述代码改为如下：

for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className=''; //所有的class都变为null的状态；
aDiv[i].style.display="none";
}
this.className='active';
//"index"应该加载到javascript中；
aDiv[this.index].style.display="block";

};
}

0 0