10-17

最新推荐文章于 2024-06-10 23:35:28 发布

原创最新推荐文章于 2024-06-10 23:35:28 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

页面切换


<!DOCTYPE html>
<html>
<head>
	<title>tab页面切换练习</title>

	<style type="text/css">
		#tab div {
			display: none;
		}

		#tab div.active {
			display: block;
		}
	</style>
</head>
<body>
	<div id="tab">
		<input type="button" class="btn" value="选择1">
		<input type="button" class="btn" value="选择2">
		<input type="button" class="btn" value="选择3">
		<input type="button" class="btn" value="选择4">
		<input type="button" class="btn" value="选择5">

		<div class="content active">你</div>
		<div class="content">我</div>
		<div class="content">他</div>
		<div class="content">它</div>
		<div class="content">她S</div>
	</div>
</body>

<script type="text/javascript">
	// tab切换按钮列表
	var btns = document.getElementsByClassName('btn');

	// 内容div列表
	var divs = document.getElementsByClassName("content");

	// for (var i = 0; i < btns.length; i++) {
	// btns[i].index = i;

	// // i 是当前的索引
	// btns[i].onclick = function () {
	//		// 1. 将div全部隐藏
	//		for (var j = 0; j < divs.length; j++) {
	//			divs[j].className = "content";
	//		}
	//		// 2. 将当前按钮对应索引的div显示
	//		divs[this.index].className = "content active";
	//	}
	// }

	for (var i = 0; i < btns.length; i++) {
		// i 是当前的索引
		btns[i].onclick = (function (index) {
			return function () {
				// 1.将div全部隐藏
				for (var j = 0; j < divs.length; j++) {
					divs[j].className = "content;"
				}
				// 2. 将当前按钮对应索引的div显示
				divs[index].className = "content active";
			}
		})(i);
	}


</script>
</html>