全选效果：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<h2>你最喜欢的水果</h2>
		<input type="checkbox" id="all" />
		<label for="all">全选</label>
		<button id="reverse">反选</button>
		<p>
			<input type="checkbox" id="box1" class="fruit" />
			<label for="box1">香蕉</label>
			<input type="checkbox" id="box2" class="fruit" />
			<label for="box2">橘子</label>
			<input type="checkbox" id="box3" class="fruit" />
			<label for="box3">苹果</label>
		</p>
	</body>
	<script>
		var all = document.getElementById("all")
		var rev = document.getElementById("reverse");
		var fruit = document.querySelectorAll(".fruit");
		// 第一种 全选/全不选
		/*all.onclick = function () {
		  var t = all.checked;
		  if (t === true) {
		    for (var i = 0; i < fruit.length; i++) {
		      fruit[i].checked = true;
		    }
		  } else {
		    for (var i = 0; i < fruit.length; i++) {
		      fruit[i].checked = false;
		    
		  }
		};*/
		// 第二种 全选/全不选
		all.onclick = function() {
			for (var i = 0; i < fruit.length; i++) {
				fruit[i].checked = this.checked;
			}
		};
		// 反选
		rev.onclick = function() {
			for (var i = 0; i < fruit.length; i++) {
				fruit[i].checked = !fruit[i].checked;
			}
		};
		/*//第一种 单个全选中 全选也被选中
		var fruitArr = Array.from(fruit); //转换为数组
		fruitArr.forEach(function (item) {
		  item.onclick = function () {
		    // var t = fruitArr.every(function (item) {
		    //   return item.checked === true;
		    // });
		    // all.checked = t;
		    //简写
		    all.checked = fruitArr.every((item) => item.checked);
		  };
		});*/
		// 第二种
		var fruitArr = Array.from(fruit); //转换为数组
		fruitArr.forEach(function(item) {
			item.onclick = function() {
				//给每个水果input绑定单击事件
				var count = 0;
				for (var j = 0; j < fruitArr.length; j++) {
					if (fruitArr[j].checked) {
						//如果遍历每个水果input是选中状态
						count++; //计数
					}
				}
				if (count === fruitArr.length) {
					all.checked = true;
				} else {
					all.checked = false;
				}
			};
		});
	</script>
</html>

二级菜单：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.clearfix::after {
				display: block;
				content: "";
				clear: both;
			}

			.nav {
				width: 1000px;
				margin: 0 auto;
				background-color: #ccc;
			}

			.nav>li {
				position: relative;
				float: left;
			}

			.nav li {
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}

			.nav li a {
				display: block;
				color: #222;
				font-size: 14px;
			}

			.nav li .subnav {
				display: none;
				position: absolute;
				left: 0;
				top: 40px;
				width: 100px;
				background-color: #ccc;
			}

			.nav li .subnav .subnav1 {
				display: none;
				position: absolute;
				left: 100px;
				top: 0;
				width: 100px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<ul class="nav clearfix" id="nav">
			<li><a href="#">首页</a></li>
			<li>
				<a href="#">活动</a>
				<ul class="subnav">
					<li>
						<a href="#">活动1</a>
						<ul class="subnav1">
							<li><a href="#">帮助1</a></li>
							<li><a href="#">帮助2</a></li>
							<li><a href="#">帮助3</a></li>
						</ul>
					</li>
					<li><a href="#">活动2</a></li>
					<li><a href="#">活动3</a></li>
				</ul>
			</li>
			<li><a href="#">招聘</a></li>
			<li>
				<a href="#">帮助中心</a>
				<ul class="subnav">
					<li><a href="#">帮助1</a></li>
					<li><a href="#">帮助2</a></li>
					<li><a href="#">帮助3</a></li>
				</ul>
			</li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</body>
	<script>
		var lis = document.getElementById("nav").getElementsByTagName("li"); //集合
		console.log(lis); //8个li 所有的li
		for (let i = 0; i < lis.length; i++) {
			//   鼠标移入
			lis[i].onmousemove = function() {
				this.style.backgroundColor = "#f00";
				// console.log(this); //当前触发onmousemove的li
				var oUl = this.getElementsByTagName("ul")[0];
				if (oUl != undefined) {
					oUl.style.display = "block";
				}
			};
			//   鼠标移出
			lis[i].onmouseout = function() {
				this.style.backgroundColor = "";
				var oUl = this.getElementsByTagName("ul")[0];
				if (oUl != undefined) {
					oUl.style.display = "none";
				}
			};
		}
	</script>
</html>

选项卡：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.container {
				width: 600px;
				margin: 0 auto;
			}

			.container .header {
				width: 600px;
				height: 40px;
				line-height: 40px;
				background-color: #ccc;
			}

			.container .header li {
				float: left;
				width: 200px;
				text-align: center;
			}

			.container .header li.on {
				background-color: #f00;
			}

			.container .list {
				width: 600px;
				box-shadow: 0 0 0 2px #999 inset;
			}

			.container .list .con {
				padding: 6px 10px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="header">
				<li class="on"><a href="#">html</a></li>
				<li><a href="#">css</a></li>
				<li><a href="#">js</a></li>
			</ul>
			<div class="list">
				<div class="con">
					html的内容<br />
					HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
				</div>
				<div class="con">
					<h4>css的内容</h4>
					<p>
						层叠样式表(英文全称：Cascading Style
						Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
					</p>
				</div>
				<div class="con">
					<h4>js的内容</h4>
					<p>
						JavaScript（简称“JS”）
						是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
						基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
					</p>
				</div>
			</div>
		</div>
	</body>
	<script>
		var lis = document.querySelectorAll(".header li");
		var cons = document.querySelectorAll(".list .con");
		// 第一种 var
		for (var i = 0; i < lis.length; i++) {
			lis[i].idx = i; //给每一个li添加idx属性 值为索引
			lis[i].onclick = function() {
				var _index = this.idx; //获取当前点击的li的属性idx的值 索引
				for (var j = 0; j < lis.length; j++) {
					lis[j].className = "";
					cons[j].style.display = "none";
				}
				this.className = "on";
				cons[_index].style.display = "block";
			};
		}
		// 第二种 let
		// for (let i = 0; i < lis.length; i++) {
		//   lis[i].onclick = function () {
		//     for (var j = 0; j < lis.length; j++) {
		//       lis[j].className = "";
		//       cons[j].style.display = "none";
		//     }
		//     this.className = "on";
		//     cons[i].style.display = "block";//let 作用域会把每一轮的i保留
		//   };
		// }
		// 第三种
		// for (var i = 0; i < lis.length; i++) {
		//   lis[i].onclick = function () {
		//     for (var j = 0; j < lis.length; j++) {
		//       if (this === lis[j]) {
		//         this.className = "on";
		//         cons[j].style.display = "block";
		//       } else {
		//         lis[j].className = "";
		//         cons[j].style.display = "none";
		//       }
		//     }
		//   };
		// }
	</script>
</html>

JS 实现全选效果、二级菜单、选项卡

全选效果：

二级菜单：

选项卡：

猜你喜欢