用js实现选项卡案例

最新推荐文章于 2021-01-27 23:28:45 发布

一地鸡毛_0101

最新推荐文章于 2021-01-27 23:28:45 发布

阅读量806

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_37555897/article/details/72614555

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
      div {
      	width:200px;
      	height:200px;
      	border:1px solid #f00;
      	display:none;
      }
    </style>
	<script type="text/javascript">
		/*
		 * 需求：点击按钮显示对应的div，让其他的按钮背景色去掉，让其他的div都隐藏
		 *    分析一：
		 *    1、获取到所有的按钮以及div
		 *    2、给每一个按钮添加点击事件
		 *      (1)把上一个点击按钮的背景色去掉
		 *      (2)把上一个点击的按钮对应的div，让它隐藏
		 *      (3)给当前点击的按钮添加一个背景色
		 *      (4)给当前点击的按钮对应的div，让它显示
		 * --------------------------------------------------------
		 */
		/*window.onload = function(){
			var  inputs = document.querySelectorAll("input");
			var divs = document.querySelectorAll("div");
			var last = inputs[0];//存取的是上一次的点击对象，默认为inputs[0]
			/*
			 * 每一个按钮都对应一个div，它们的下标值都是相同的
			 * 如果取到一个下标值,通过下标值就能找到相应的按钮与div
			 */
			/*for(var i=0;i<divs.length;i++){
				inputs[i].index = i;//给每一个nput自定义一个index属性，存的是它们对应的索引值
				inputs[i].onclick = function(){
					
					last.style.backgroundColor = "";//去掉上一次点击的按钮的背景色			
					divs[last.index].style.display = "none";
					divs[this.index].style.display = "block";
					this.style.backgroundColor = "yellowgreen";
					
					last = this;//把上一次点击的对象更新为这一次点击的对象
					
				};
			}
			
		};
		/*
		 *  分析二：
		 *    1、获取到所有的按钮以及div
		 *    2、给每一个按钮添加点击事件
		 *      (1)把所有按钮的背景色去掉
		 *      (2)把所有的div隐藏
		 *      (3)给当前点击的按钮添加一个背景色
		 *      (4)给当前点击的按钮对应的div，让它显示
		 */
		window.onload = function(){
			
			var inputs = document.querySelectorAll("input");
			var divs = document.querySelectorAll("div");
			
			for(var i=0;i<inputs.length;i++){
				inputs[i].index = i;//自定义属性，存放索引值
				inputs[i].onclick = function(){
					//当点击按钮I的时候才执行内循环，与外循环无关
					for(var i=0;i<inputs.length;i++){
						inputs[i].style.backgroundColor = "";
						divs[i].style.display = "none";
					}
					this.style.backgroundColor = "yellowgreen";
					divs[this.index].style.display = "block";
				};
			}
		};
		
	</script>
</head>
<body>
	<input type="button" id="btn" value="选项1" style="background-color:yellowgreen;" />
	<input type="button" id="btn" value="选项2" />
	<input type="button" id="btn" value="选项3" />
	<div style="display:block;">div1</div>
	<div>div2</div>
	<div>div3</div>
</body>
</html>