About the operation of adding and subtracting classes in jQuery (with code)-JS Tutorial-php.cn

About the operation of adding and subtracting classes in jQuery (with code)

不言

Release： 2018-07-17 17:23:55

Original

1669 people have browsed it

This article mainly introduces the operations of adding and subtracting classes in jQuery (with code). It has a certain reference value. Now I share it with you. Friends in need can refer to it

<!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>

Copy after login

Related recommendations:

How to use jQuery to implement increment and decrement of input values

The above is the detailed content of About the operation of adding and subtracting classes in jQuery (with code). For more information, please follow other related articles on the PHP Chinese website!