jquery addClass() 和removeClass() 被选元素添加类名删除类名class属性的使用

时间：5年前阅读：6048

1、addClass() 方法向被选元素添加一个或多个类名。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

2、removeClass() 方法从被选元素移除一个或多个类。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			P{
				float: left;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 30px;
				color: white;
				background: darkmagenta;
				margin: 10px;
			}
			p.cur{
				color: black;
				background: blue;
				font-size: 50px;
			}
		</style>
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$('p').click(function(){
					$(this).css({'background':'blue','color':'black','font-size':'50px'}).siblings('p').css({'background':'darkmagenta','color':'white','font-size':'30px'})
					
					
//				另一种方法	点击谁给谁加个'cur'的class样式   remove删除 兄弟元素的cur样式
				$(this).addClass('cur').siblings('p').removeClass('cur');
				
					
				})
			})
		</script>
	</head>
	<body>
		<p class="cur">1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery addClass() 和removeClass() 被选元素添加类名删除类名class属性的使用

网友评论