你的位置:首页 > 软件开发 > Java > tab栏的切换【DOM点击事件】

tab栏的切换【DOM点击事件】

发布时间:2017-09-06 12:00:11
不太美观,但是想把这段js代码放上来,自己翻着玩。 <style type="text/css"> .Box { width: 240px; border: 1px solid #000; margin: 100px auto; padd ...

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: #EEC900tab栏的切换【DOM点击事件】;
}

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

<div >one</div>
<div >two</div>
<div >three</div>
<div >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点击事件】

关键词:dom

dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。