jquery中class的应用

时间：6年前阅读：5138

addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

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

removeClass() remove删除兄弟元素的cur样式

此文只是罗列了jQuery操作class的理论知识，下面是其中一个添加操作class的实例。

直接上代码例子：

<!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中class的应用

网友评论