TOP

tab栏的切换【DOM点击事件】
2017-10-10 14:39:19 】 浏览:9974
Tags:tab 切换 DOM 点击 事件

不太美观,但是想把这段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>

 


tab栏的切换【DOM点击事件】 https://www.cppentry.com/bencandy.php?fid=107&id=133198

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇二维码关闭【parentNode】 下一篇在jQuery中使用canvas时遇到的问题