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.οnlοad=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].οnclick=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].οnclick=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";
};
}