按钮切换

最新推荐文章于 2024-04-15 09:16:51 发布

倚楼听风雨的行者

最新推荐文章于 2024-04-15 09:16:51 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/qq_42972187/article/details/91601090

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.box {
			width: 100px;
			height: 50px;
			border: 1px solid gray;
			border-radius: 5px;
			position: relative;
		}
		
		#boxinner {
			width: 20px;
			height: 20px;
			background: green;
			border-radius: 50%;
			position: absolute;
			/*	left: -100px;*/
			bottom: 20px;
		}
	</style>

	<body>
		<div id="coontent">
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 1
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 2
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 3
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 4
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 5
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 6
			</div>
			<div class="box" id="container">
				<span class="boxinner" id="boxinner"></span> 7
			</div>
		</div>

	</body>
	<script>
		var container = document.getElementById("container");
		//		var boxinner = document.getElementById("boxinner");
		var box = document.getElementsByClassName('box');
		var boxinner = document.getElementsByClassName("boxinner")
		//		console.log(boxinner)
		//		console.log(box.length)
		var flag = true;
		//		var i = 0;
		var timer;
		for(var i = 0; i < box.length; i++){
			box[i].index = i;
		box[i].onclick = function() {		
//			console.log(1111)
//			console.log(box)
//						for(var j = 0; j < boxinner.length; j++) {
							if(flag == true) {
								boxinner[this.index].style.left = 0 + "px";
//								console.log(j);
								flag = false;
			
							} else {		
								boxinner[this.index].style.left = 80 + "px";
								flag = true;
			
							}
							
//						}
		}
		}
	</script>

</html>