JS - 循环绑定实现，点击转换CSS类

最新推荐文章于 2022-09-10 16:08:20 发布

LSYHhhhh

最新推荐文章于 2022-09-10 16:08:20 发布

阅读量622

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_33961117/article/details/83061639

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>案例</title>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		li {
			width: 80px;
			height: 35px;
			background-color: pink;
			border-radius: 5px;
			float: left;
			margin-left: 3px;
		}
		li.active {
			background-color: red;
		}
	</style>
</head>
<body>
	<ul>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script type="text/javascript">
	// 1.获取所有ls = >lis
	var lis = document.querySelectorAll('li');
	/*
	// 2.循环绑定点击事件
	for (var i = 0; i < lis.length; i++) {
		// 操作类名 => css样式
		lis[i].onclick = function () {
			for (j in lis) {
				if (lis[j].className == "active") {
					lis[j].className = "";
				}
			}
			this.className = "active";
		}
	}
	*/

	// 循环绑定
	for (var i = 0; i < lis.length; i++) {
		// 将有类名的(活跃的)li存储起来
		if (lis[i].className) var obj = lis[i];

		lis[i].onclick = function () {
			// 取消之前活跃的li
			obj.className = "";
			// 将自身设置为活跃状态
			this.className = "active";
			// 更新获取的对象
			obj = this;
		}
	}



</script>
</html>

LSYHhhhh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS - 循环绑定实现，点击转换CSS类

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;案例&lt;/title&gt; &lt;style type="text/css"&gt; ul { margin: 0
复制链接

扫一扫