jquery 给选中的li标签添加'select' class,移除兄弟标签的'select' class

宗安翔
2023-12-01
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 </head>
 <style>
 .img li{
 	display: none;
 }
 .img li.select{
 	display: block;
 }
 </style>
 <body>
 	<!-- 图片 -->
 	<ul class="img">
 		<li><img src="" alt=""></li>
 		<li><img src="" alt=""></li>
 		<li><img src="" alt=""></li>
 		<li><img src="" alt=""></li>
 	
 	</ul>
 	<!-- 按钮 -->
 	<ul class="btn">
 		<li class="select"></li>
 		<li></li>
 		<li></li>
 		<li></li>
 	</ul>
 	<script>
 	//点击按钮显示对应的图片
 		$('btn li').click(function(){
 			var index = $(this).index()+1;
			$(this).addClass('select').siblings().removeClass('select');
			$('img li:nth-child('+index+')').addClass('selectd').siblings().removeClass('selectd');
		})
 	</script>
 </body>
 </html>

 

 类似资料: