关于jQuery的增减类的操作（附代码）

来源：化拓教育网

这篇文章主要介绍了关于jQuery的增减类的操作（附代码），有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{padding: 0;margin: 0;}
	ul{
	list-style: none;
	}
	ul li{
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #87CEEB;
	float: left;
	}
	ul li.active{
	background: #00FF00;
	}
	</style>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<ul>
	<li>list1</li>
	<li>list2</li>
	<li>list3</li>
	<li>list4</li>
	</ul>
	</body>
	
	<script type="text/javascript">
	
	//用mouseover方法
	$("ul li").mouseover(function(){
	$(this).addClass("active");
	}).mouseout(function(){
	$(this).removeClass("active");
	})
	//结合选择器选择
	$("ul li").mouseover(function(){
	$(this).addClass("active").siblings("li").removeClass("active");
	})
	
	</script>
</html>

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务