js实现淘宝选项卡效果方法二 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tabchange</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				color: white;
				font-size: 100px;
				text-align: center;
				line-height: 200px;
				font-weight: bold;
				display: none;
			}
		</style>
	</head>
	<body>
		<input style="background-color: green;" type="button" value="按钮1" />
		<input type="button" value="按钮2" />
		<input type="button" value="按钮3" />
		<div style="display: block;">1</div>
		<div>2</div>
		<div>3</div>
	</body>
	<script type="text/javascript">
		//获取按钮以及div
		var btns = document.getElementsByTagName("input");
		var divs = document.getElementsByTagName("div");
		
		//为按钮循环添加点击事件
		for (var i = 0; i < btns.length; i++) {
			//为按钮绑定一个属性，来存储下标i
			btns[i].index = i;
			btns[i].onclick = function() {
				//将所有按钮的颜色清除，将所有div隐藏
				for (var j = 0; j < divs.length; j++) {
					divs[j].style.display = "none";
					btns[j].style.backgroundColor = "";
				}
				//为当前点击的按钮设置背景色
				this.style.backgroundColor = "green";
				//将当前按钮对应的div显示出来
				divs[this.index].style.display = "block";
			}
		}
	</script>
</html>

 

posted @ 2020-03-25 13:37  JackieDYH  阅读(7)  评论(0)  编辑  收藏  举报  来源