JavaScript：结合CSS实现选项卡

1.首先在body中画4个button和4个div，在style中对button和div进行初始化

	<input class="active" type="button" value="教育">
	<input type="button" value="培训">
	<input type="button" value="招生">
	<input type="button" value="出国">
	<div style="display: block;">111111</div>
	<div>222222</div>
	<div>333333</div>
	<div>444444</div>
<style type="text/css">
	.active{
		background-color: yellow;
	}
	div{
		width: 200px;
		height: 200px;
		background-color: gray;
		border: 1px solid #999;
		display: none;
	}
</style>

2.在script中实现选项卡，具体步骤为：

  • 获取4个div和4个button变量
  • 定义每个button的onclick事件函数
  • 将所有button的背景颜色消除，将所有div的显示改为不可见
  • 将当前点击的button背景色改为黄色，将当前button对应的div显示为block。重要实现代码：aBtn[i].index = i
	window.onload = function(){
		var aBtn = document.getElementsByTagName('input');
		var aDiv = document.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";
			}
		}
	}

3.完整示例代码

<!DOCTYPE html>
<html>
<head>
	<title>111</title>
<style type="text/css">
	.active{
		background-color: yellow;
	}
	div{
		width: 200px;
		height: 200px;
		background-color: gray;
		border: 1px solid #999;
		display: none;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var aBtn = document.getElementsByTagName('input');
		var aDiv = document.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>
	<input class="active" type="button" value="教育">
	<input type="button" value="培训">
	<input type="button" value="招生">
	<input type="button" value="出国">
	<div style="display: block;">111111</div>
	<div>222222</div>
	<div>333333</div>
	<div>444444</div>
</body>
</html>

4.效果

posted @ 2020-02-06 14:06  昨夜昙花  阅读(11)  评论(0)    收藏  举报