JS to make a simple tab

<!  DOCTYPE html>#main {height:400px;            width:400px;        margin:20px Auto; } #main>div{height:300px;            width:300px; Background-Color:lightpink;            Color:white; Font-size:30px; Text-Align:center; Line-height:300px;        Display:none; } #main>div:nth-child (2) {background-Color:yellow; } #main>div:nth-child (3) {background-Color:greenyellow; } #main>div:nth-child (4) {background-color: #1E90FF;            } input{margin:13px; Border-radius:5px; Background-color:coral;        border:1px solid DodgerBlue; }. color{Background-color:red; }    </style>//the principle of the tab, first let all the hidden, and then let the current display    varMain=document.getelementbyid ("main"); varBut=main.getelementsbytagname ("Input"); varDiv=main.getelementsbytagname ("div"); //Display:none represents a hidden             for(vari=0;i<but.length;i++) {But[i].index=i;//add an index to each button and change the index to another.But[i].onclick=function(){//Binding a point-and- Click event             for(vari=0;i<but.length;i++) {Div[i].style.display= "None";//let all div hideBut[i].classname= "";//Use the loop to clear all but the classname            }             This. classname= "COLOR";//give the current but add classname to make it change color when clickeddiv[ This. index].style.display= "Block";//let the current corresponding div display        }    }</script>
JS to make a simple tab