【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]. = 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