js添加或删除class类名

作者：Miao 阅读：5549次

通常通过js方法给div进行class类名的添加或者删除，比较常见的就是tab切换了，下面就来具体讲一下如何使用js进行操作，最后会附上完整实例代码：

<div class="ul">
	<div class="li active" onclick="funJs(0)">HTML</div>
	<div class="li" onclick="funJs(1)">CSS</div>
	<div class="li" onclick="funJs(2)">JavaScript</div>
</div>

首先：获取所有li节点，这里的active就是我们要进行添加、删除的样式。

var li_arr = document.getElementsByClassName("li");

方法一：原生写法

function funJs(index) {
	for (var i = 0; i < li_arr.length; i++) {
		// 当前点击li添加active样式
		if (i == index) {
			li_arr[i].classList.add("active");
		}
		// 其余删除active样式
		else {
			li_arr[i].classList.remove("active");
		}
	}
}

方法二：jQuery写法，不要忘了引入[jQuery版本库]哟！

function funJquery(index) {
	$(".li").eq(index).addClass("active").siblings().removeClass("active");
}

实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js添加或删除class类名</title>
		<style type="text/css">
			.ul {
				width: 100px;
				height: 150px;
			}
			.ul .li {
				width: 100px;
				line-height: 50px;
				text-align: center;
				background: #000;
				border-bottom: 1px solid #fff;
				color: #fff;
			}
			.ul .active {
				background: #f30;
			}
		</style>
	</head>
	<body>
		<div class="ul">
			<div class="li active" onclick="funJs(0)">HTML</div>
			<div class="li" onclick="funJs(1)">CSS</div>
			<div class="li" onclick="funJs(2)">JavaScript</div>
		</div>
		<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 获取所有li节点
			var li_arr = document.getElementsByClassName("li");
			// 方法一：js原生
			function funJs(index) {
				for (var i = 0; i < li_arr.length; i++) {
					if (i == index) {
						li_arr[i].classList.add("active");
					} else {
						li_arr[i].classList.remove("active");
					}
				}
			}
			// 方法二：jQuery写法，不要忘了引入jQuery版本库哟！
			function funJquery(index) {
				$(".li").eq(index).addClass("active").siblings().removeClass("active");
			}
		</script>
	</body>
</html>

赞一个 (393)