jq点击当前添加样式

1登峰造极

已于 2023-04-10 14:13:48 修改

阅读量2.9k

点赞数

分类专栏： js jquery 文章标签： css css3 html

于 2019-07-05 10:47:06 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/94719482

版权

js 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

jquery

11 篇文章 0 订阅

订阅专栏

点击查看案例

这样一个列表，当前这里是写死的，如果我们是从后台拿到的一个数据列表，在前端循环出来，我们点击当前需要选中，并且拿到id,添加上一个小圆点的样式
在这里插入图片描述

至于上面怎么循环这个列表根据自己用的框架，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	    <style type="text/css">
	    	*{padding: 0;margin: 0;}
	    	ul li{
	    		list-style: none;
	    	}
	    	.box{
	    		width: 500px;
	    		height: 600px;
	    		border: 1px solid red;
	    		margin: 0 auto;
	    	}
	    	.box ul li{
	    		width: 100%;
	    		height: 30px;
	    		background: #ccc;
	    		margin-top: 5px;
	    		display: flex;
	    	}
	    	.box ul li .add .pname{
	    		width: 20px;
	    		height: 20px;
	    		border-radius: 100%;
	    		border: 1px solid darkgreen;
	    	}
	    	.box ul li .title{
	    		width: 480px;
	    	}
	    	.box ul li .add{
	    		flex: 1;
	    	}
	    	.nav_active{
	    		background: red;
	    	}
	    </style>
	</head>
	<body>
		<div class="box">
			<ul id="list1">
			<!---我这里是写死的需要可以自己根据后台数据循环出来-->
				<li onclick="openbuy(this,id)">
					<div class="title">
						<p>卡券1</p>
					</div>
					<div class="add">
						<p class="pname"></p>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		  function openbuy(self,id) {
		  	alert(id)
	         var lilen = $('#list1 li');
	         for (var i = 0; i < lilen.length; i++) {
	            lilen[i].querySelector('.pname').classList.remove('nav_active');
	         }
	          self.querySelector('.pname').className+= ' nav_active';
        }
	</script>
</html>

、不懂请追问