50行实现最简单的js原生选项卡，前端面试必考！

50行实现最简单的js原生选项卡，前端面试必考！

一、dom结构

<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div class="card" style="display: block;">1111</div>
<div class="card">2222</div>
<div class="card">3333</div>

二、script标签

window.onload = function () {
    var allinput = document.getElementsByTagName('input')
    var allcard = document.getElementsByClassName('card')
    for (let i = 0; i < allinput.length; i++) {
        //循环遍历每一个input的button i为index
        allinput[i].onclick = function () {
            //先将所有的选项初始化为class="" ,且样式为display：none
            for (let j = 0; j < allinput.length; j++) {
                allinput[j].className = "";
                allcard[j].style.display = "none";
            }
            //将选中的那个index为i的classname设置为active，style显示出来
            allinput[i].className = "active";
            allcard[i].style.display = "block";
        }
    }
}

三、css样式

.card {
    display: none;
    border: 1px solid red;
    width: 80px;
    height: 80px;
}
.active {
	color: red;
}

完成！撒花！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

四、效果