1. 程式人生 > >jquery 給選中的li標籤新增'select' class,移除兄弟標籤的'select' class

jquery 給選中的li標籤新增'select' class,移除兄弟標籤的'select' class

 <!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>