【JS】Tab面板

微信订阅号：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].onclick = show(i);
}

---

CSS自己调。

这个简单的Tab面板切换，需要注意的地方是用了2个for循环。

for(var i = 0; i<aInput.length; i++) {
    aInput[i].onclick = show(i);
}

这个循环的作用是为每个input标签绑定一个点击事件。之所以要在点击之后还要调用另一个函数，是因为for循环的执行速度太快了，在点击button之后的瞬间，i就变成了3。如果不调用另一个函数，而是在onclick之后就等于一个function，出现的情况是不管点哪个button，最后显示的都会是最后一个面板。

for(var i = 0; i<aInput.length; i++) {
    aInput[i].onclick = function() {
        console.log(i);
    }
};

如果代码是这样，可以看到最后输出的都是 3 。

微信订阅号：Rabbit_svip

所以正确方法是在绑定onclick之后，通过传参，把点击那刻 i 的值传给show()函数。然后再通过 show() 函数去设置该显示哪个div。