removeClass和addClass实现选择效果

最新推荐文章于 2019-04-27 15:32:24 发布

包子源

最新推荐文章于 2019-04-27 15:32:24 发布

阅读量2k

点赞数 1

分类专栏： jQuery 文章标签： web前端 jquery 实例

本文链接：https://blog.csdn.net/ziwoods/article/details/49867695

版权

jQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

利用jquery的removeClass和addClass实现选择效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li{width: 50px;height: 50px;border: 1px solid #cccccc;border-radius: 50%;line-height: 50px;text-align: center;list-style-type: none;}
			.on{background-color: red;color: #ffffff;}
			
		</style>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script>
			$(function(){
				$("ul li").click(function(){
					$("ul li").removeClass("on");
					$(this).addClass("on");
				});
			});
		</script>
	</head>
	<body>
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
	</ul>
	</body>
</html>