思路:
1.为每个小块块【1,2,3,4】添加点击事件
2.把所有小块的颜色变成粉色
3.把点击的小块块颜色变成紫色
4.把大方块对应的样视变成block,其他隐藏
注意:循环先执行,事件触发的时候才执行。
**
错误的写法
**
下面是错误的代码
<div class="big">
<div class="tab" id="alltab">
<div class="tabone">1</div>
<div class="tabone">2</div>
<div class="tabone">3</div>
<div class="tabone">4</div>
</div>
<div class="content" id="allcontent">
<div class="Cone">11111111111</div>
<div class="hide">222222222</div>
<div class="hide">33333333333</div>
<div class="hide">44444444</div>
</div>
</div>
function my$(id){
return document.getElementById(id);
}
var tabobj = my$("alltab").getElementsByTagName("div");
var conobj = my$("allcontent").getElementsByTagName("div");
console.log(conobj[2].className);
for(var i=0;i<tabobj.length;i++){
tabobj[i].onclick = function(){
for(var j=0;j<tabobj.length;j++){
tabobj[j].style.backgroundColor = "pink";
conobj[j].className = "hide";
}
this.style.backgroundColor = "purple";
conobj[i].className = "Cone";
}
}
可以发现点击时程序报错,因为最后一行:conobj[i].className = “Cone”;这一行代码,conobj[i]是undefined。那么为什么是undefined的呢?原因就是for循环是先执行的,事件是触发的时候才执行,所以最外面的for循环最先开始执行,当点击小方块的时候,事件被触发,然而这时的i已经变成“4”。超过了数组的范围,所以找不到这个元素。
我们要做的就是在没有点击小方块之前给小方块存上索引值。
索引值就要用到setAttribute(),添加属性。
下面是正确代码
-----------------------------------------------------分割线--------------------------------------------------------
function my$(id){
return document.getElementById(id);
}
var tabobj = my$("alltab").getElementsByTagName("div");
var conobj = my$("allcontent").getElementsByTagName("div");
for(var i=0;i<tabobj.length;i++){
tabobj[i].setAttribute("index",i);
tabobj[i].onclick = function(){
for(var j=0;j<tabobj.length;j++){
tabobj[j].style.backgroundColor = "pink";
conobj[j].className = "hide";
}
this.style.backgroundColor = "purple";
var a = this.getAttribute("index");
conobj[a].className = "Cone";
}
}
用setAttribute()给元素添加一个索引属性,再获取就可以了。