tab栏的切换DOM点击事件

Posted 2020-10-05 怀瑾握瑜

不太美观，但是想把这段js代码放上来，自己翻着玩。

<style type="text/css">
.Box {
width: 240px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
}

.con {
width: 100%;
height: 200px;
background-color: #cccccc;
border: 1px solid #000;
margin-top: 10px;
display: none;
}

.current {

 

 

background-color: #EEC900;
}

<div class="Box" id="box">
<button class="current">one</button>
<button>two</button>
<button>three</button>
<button>four</button>

<div class="con" style="display:block">one</div>
<div class="con">two</div>
<div class="con">three</div>
<div class="con">four</div>
</div>

<script>

　　var box=document.getElementById("box");

　　var btns=box.getElementsByTagName("button");

　　var divs=box.getElementsByTagName("div");

　　for(var i = 0 ; i<btns.length; i++){

　　btns[i].setAttribute("index",i);

　　btns[i].onclick=function(){

　　for(var j =0 ; j<btns.length ; j++){

　　btns[j].removeAttribute("class");

　　divs[j].style.display="none";

}

　　this.setAttribute("class","current");

　　divs[this.getAttribute("index")].style.display="block";

}

}

</script>