js小案例:实现选项卡功能
html部分代码
<button>1</button>
<button>2</button>
<button>3</button>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
css部分代码
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid black;
display: none;
}
button.active {
background-color: pink;
}
div.dis {
display: block;
}
</style>
js部分代码
<script>
window.onload=function(){
var allBtn = document.getElementsByTagName('button');
var allDiv = document.getElementsByTagName('div');
//给所有的按钮给上点击事件
for (var i = 0; i < allBtn.length; i++) {
allBtn[i].index = i;
allBtn[i].onclick = function () {
for (var j = 0; j < allBtn.length; j++) {//点击按钮时先将所有的按钮的背景颜色清空
allBtn[j].className = '';
allDiv[j].className = '';
}
this.className = 'active';
allDiv[this.index].className = 'dis';
}
}
}
</script>
通过点击button,将当前的index值给到allDiv这个数组的下标,通过for循环历遍内容区域,如果所对应的索引值相同则将其内容显示出来,否则进行隐藏。
运行效果