• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>JavaScript

js添加或删除class类名

作者:Miao 阅读:4333次

通常通过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>

本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com

标签:JavaScript