TAB选项卡

最新推荐文章于 2022-08-29 09:45:28 发布

Fade Away

最新推荐文章于 2022-08-29 09:45:28 发布

阅读量226

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_26239917/article/details/88946649

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../css/diy-default.css">
		<link rel="stylesheet" href="../../css/resetm.css">
		<style>
			.ul1 li {
				text-align: center;
				list-style: none;
				width: 100px;
				line-height: 50px;
				border: 2px solid red;
				margin-left: 2px;
				margin-right: 2px;
				float: left;
			}

			.ul1 .selected {
				background-color: red;
			}

			.ul1 li:nth-child(1) {
				margin-left: 0px;
			}


			.ul2,
			.ul2 li {
				width: 536px;
				height: 536px;
				line-height: 536px;
				float: left;
				text-align: center;
				list-style: none;
			}

			.ul2 li {
				display: none;
			}

			.ul2 .selected {
				display: block;
				background-color: #ADFF2F;
			}

			.ul2 li {
				display: none;
			}
		</style>
	</head>
	<body>
		<ul class="ul1 cl">
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
			<li>32</li>
		</ul>
		<ul class="ul2 cl">
			<li class="selected">28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
			<li>32</li>
		</ul>
	</body>
	<script>
		var li1 = document.querySelectorAll(".ul1 li");
		var li2 = document.querySelectorAll(".ul2 li");
		tab(li1, li2, "selected");
		//绑定事件
		//参数绑定,需要什么用什么绑到this上面
		//通过i,j的对应关系达成效果

		//this绑定
		// 		function tab(ele1, ele2, class_selected) {
		// 			for (let i = 0; i < ele1.length; i++) {
		// 				var lis = ele1[i];
		// 				lis.index = i;
		// 				lis.onclick = function() {
		// 					for (let j = 0; j < ele2.length; j++) {
		// 						if (i == j) {
		// 							ele1[j].className = class_selected;
		// 							ele2[j].className = class_selected;
		// 						} else {
		// 							ele1[j].removeAttribute("class");
		// 							ele2[j].removeAttribute("class");
		// 						}
		// 					}
		// 				}
		// 			}
		// 		}
		//let预编译
					function tab(ele1, ele2, class_selected) {
					for (let i = 0; i < ele1.length; i++) {
						var lis = ele1[i];
						lis.onclick = function() { //i一定是当前次数的i
							for (let j = 0; j < ele2.length; j++) {
								if (i == j) {
									ele1[j].className = class_selected;
									ele2[j].className = class_selected;
								} else {
									ele1[j].removeAttribute("class");
									ele2[j].removeAttribute("class");
								}
							}
						}
					}
				};

		//函数自运行   没啥意义   外面无法访问里面的变量   闭包
// 		(function tab(ele1, ele2, class_selected) {
// 			for (let i = 0; i < ele1.length; i++) {
// 				var lis = ele1[i];
// 				lis.onclick = function() { //i一定是当前次数的i
// 					for (let j = 0; j < li2.length; j++) {
// 						if (i == j) {
// 							ele1[j].className = class_selected;
// 							li2[j].className = class_selected;
// 						} else {
// 							ele1[j].removeAttribute("class");
// 							li2[j].removeAttribute("class");
// 						}
// 					}
// 				}
// 			}
// 		})(li1, li2, "selected");
	</script>
</html>

效果
在这里插入图片描述

在这里插入图片描述

Fade Away

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TAB选项卡

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../../css/diy-default.css"> <link rel="styleshee...
复制链接

扫一扫

专栏目录