选项卡
今天我们来学习如何制作选项卡，之前我们都在网站上见到页面切换的效果，今天我们就来实现它。
选项卡
是不是很神奇，接下来我们来分析一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
#div1 .active {
background: yellow;
}
#div1 div {
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #999;
display: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
aDiv[i].style.display = 'none';//先让所有的都隐藏
}
this.className = 'active';
aDiv[this.index].style.display = 'block';//然后显现出来
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display: block;">你好</div>
<div>再见</div>
<div>谢谢惠顾</div>
<div>再来一瓶</div>
</div>
</body>
</html>
通过观察<script></script>内的内容可以得知：先隐藏所有的Div,再显示当前的"Div"，从而达到实现页面切换的效果。
好了，今天的学习就到这里。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
小晴天.jpg
网友评论