32、JavaScript中选项卡的实现

来源：互联网发布：百人牛牛辅助器软件编辑：程序博客网时间：2024/06/16 23:31

1、CSS代码

<style>#div1 input {background: #CCC;}#div1 .active {background: yellow;}#div1 div {width: 200px;height: 200px;background: #CCC;display: none;}</style>

2、JavaScript代码

<script>window.onload = function() {tabSwitch('div1');};/*选项卡的实现原理,先把所有的隐藏，再把当前的显示*/function tabSwitch(id) {var oDiv = document.getElementById(id);var aBtn = oDiv.getElementsByTagName('input');var aDiv = oDiv.getElementsByTagName('div');var i = 0;/*默认的情况下是,显示第一个按钮和第一个DIV*/for (i = 0; i < aBtn.length; i++) {aBtn[i].index = i;aBtn[i].onclick = function() {/*1、首先将所有的按钮的样式去掉,和隐藏所有的DIV*/for (i = 0; i < aBtn.length; i++) {aBtn[i].className = '';aDiv[i].style.display = 'none';}/*2、在给当前的按钮加上class样式,和显示具体的一个DIV*/this.className = 'active';aDiv[this.index].style.display = 'block';};}}</script>

3、Html代码

<body><div id="div1"><input class="active" type="button" value="教育" /><input type="button" value="财经" /><input type="button" value="aaa" /><div style="display:block;">1asdfasdfds</div><div>2xzcvxzcv</div><div>5332342345</div></div></body>

0 0