JS练习---tab页切换_js tab选中-CSDN博客

本文链接：https://blog.csdn.net/qq_44864833/article/details/122546844

练习：

在导航栏上选择选项，显示框内显示相对应的内容，同时选中选项时，有高亮提示。

目标效果如下：
在这里插入图片描述
代码详解：

首先进行页面布局，有上下两个部分组成，上部为导航栏，下部为显示内容，代码如下：

<div class="box">
			<div class="list">
				<span class="active">话费</span>
				<span>酒店</span>
				<span>机票</span>
			</div>
		
			<div class="content">
				<div class="current">话费内容</div>
				<div class="d2">酒店内容</div>
				<div class="d3">机票内容</div>
			</div>
			
		</div>

其次，设置相对应的基础渲染，这里的渲染也决定了之后的js实现。
本例中是先针对整体进行渲染，然后对第一个进行选中渲染，之后js实现时候，首先去除三个导航栏的渲染，然后针对选中的进行渲染。基础渲染代码如下：

<script type="text/javascript">
		//要求： 点击上面的标签栏，底色发生变化 下面的内容对应改变 并且其它不变
		
		//进行节点选择，用TagName选择，参数需要双引号，返回值是List列表
		var spans = document.getElementsByTagName("span")  
		
		//对每一个标签进行事件绑定
		for (var i = 0; i < spans.length; i++) {    
			//自定义一个下标属性，作为元素索引，便于后期渲染
			spans[i].setAttribute("index",i);   
			spans[i].onclick = function(){    //绑定点击事件
				
				
				var index = this.getAttribute("index")   //获取当前标签的索引值
				//先恢复所有span的默认颜色（底色一致）
				 for (var j = 0; j < spans.length; j++) {
				 	spans[j].className="";    
				 }
				 this.className="active";   //标签栏渲染
				 
				 
				 //显示内容渲染，找到内容下所有的div,这里先是使用query是为了确保后面找到的div是属于content下的div
				 var divs = document.querySelector(".content").getElementsByTagName("div")
				 //先恢复所有的div的默认样式
				 for (var j = 0; j < divs.length; j++) {
				 	divs[j].className="";
				 }
				 //给对应div添加样式
				 divs[index].className="current"
			}	
		}
		
		</script>

仔细阅读注释，一些细节和思路都写在了注释里面

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
			}

			.box {
				/* 设置整体容器的大小和位置 */
				width: 300px;
				height: 300px;
				margin: 0 auto;
			}

			.list span {
				/* list下的span选择,进行基础渲染 */
				display: inline-block;
				width: 96px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: aquamarine;
				cursor: pointer;
			}

			.content div {
				/* 在content下的div选择器，进行基础渲染 */
				height: 260px;
				background-color: aliceblue;
				display: none;
			}

			.content .current {
				/* 这里是选中渲染 */
				display: block;
			}

			.list .active {
				/* 这里是选中渲染 */
				background-color: rosybrown;
			}
		</style>
	</head>


	<body>
		<div class="box">
			<div class="list">
				<span class="active">话费</span>
				<span>酒店</span>
				<span>机票</span>
			</div>

			<div class="content">
				<div class="current">话费内容</div>
				<div class="d2">酒店内容</div>
				<div class="d3">机票内容</div>
			</div>

		</div>


		<script type="text/javascript">
			//要求： 点击上面的标签栏，底色发生变化 下面的内容对应改变 并且其它不变

			//进行节点选择，用TagName选择，参数需要双引号，返回值是List列表
			var spans = document.getElementsByTagName("span")

			//对每一个标签进行事件绑定
			for (var i = 0; i < spans.length; i++) {
				//自定义一个下标属性，作为元素索引，便于后期渲染
				spans[i].setAttribute("index", i);
				spans[i].onclick = function() { //绑定点击事件


					var index = this.getAttribute("index") //获取当前标签的索引值
					//先恢复所有span的默认颜色（底色一致）
					for (var j = 0; j < spans.length; j++) {
						spans[j].className = "";
					}
					this.className = "active"; //标签栏渲染


					//显示内容渲染，找到内容下所有的div,这里先是使用query是为了确保后面找到的div是属于content下的div
					var divs = document.querySelector(".content").getElementsByTagName("div")
					//先恢复所有的div的默认样式
					for (var j = 0; j < divs.length; j++) {
						divs[j].className = "";
					}
					//给对应div添加样式
					divs[index].className = "current"
				}
			}
		</script>
	</body>
</html>