tab切换
2018-06-11 17:03 rita_0204 阅读(122) 评论(0) 编辑 收藏 举报写一个小demo,主要是用原生js实现tab切换案例。
htm部份:
<div class="box">
<div class="top">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<div class="bottom" id="bottom">
<div style="display:block;">盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
</div>
</div>
css部份:
<style>
.current{
background:green;
color:#fff;
}
.bottom div{
width:100px;
height:100px;
background:red;
display:none;
}
</style>
js部份:
<script>
var btns = document.getElementsByTagName('button');
var divs = document.getElementById('bottom').getElementsByTagName('div');
for(var i = 0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
for(var j =0;j<btns.length;j++){
btns[j].className = '';
}
this.className = 'current';
for(var i = 0;i<divs.length;i++){
for(var j = 0;j<divs.length;j++){
divs[j].style.display = 'none'
}
divs[this.index].style.display = 'block'
}
}
}
</script>