微信订阅号：Rabbit_svip
微信订阅号：Rabbit_svip
HTML代码
<input type="button" value="1"><input type="button" value="2"><input type="button" value="3"><div class="d1">d1</div><div class="d2">d2</div><div class="d3">d3</div>
JS代码
var aInput = document.getElementsByTagName('input');var div = document.getElementsByTagName('div');function show(a) { return function() { for(var j = 0; j<div.length; j++) { if(j != a) {
div[j].style.display = 'none';
}
div[a].style.display = 'block';
}
}
}for(var i = 0; i<aInput.length; i++) {
aInput[i]. = show(i);
}CSS自己调。
这个简单的Tab面板切换，需要注意的地方是用了2个for循环。
for(var i = 0; i<aInput.length; i++) {
aInput[i]. = show(i);
}这个循环的作用是为每个input标签绑定一个点击事件。之所以要在点击之后还要调用另一个函数，是因为for循环的执行速度太快了，在点击button之后的瞬间，i就变成了3。如果不调用另一个函数，而是在之后就等于一个function，出现的情况是不管点哪个button，最后显示的都会是最后一个面板。
for(var i = 0; i<aInput.length; i++) {
aInput[i]. = function() { console.log(i);
}
};
如果代码是这样，可以看到最后输出的都是 3 。
所以正确方法是在绑定之后，通过传参，把点击那刻 i 的值传给show()函数。然后再通过 show() 函数去设置该显示哪个div。
作者：滑滑兔
链接：https://www.jianshu.com/p/95dfa386cf56