removeClass와ddClass의 선택 효과

904 단어 jQuery
jquery의removeClass와addClass를 이용하여 선택 효과 구현:


	
		
		
		<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>
			$(function(){
				$("ul li").click(function(){
					$("ul li").removeClass("on");
					$(this).addClass("on");
				});
			});
		</script>
	
	
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
	</ul>
	

</code></pre> 
  <br/> 
  <br/> 
 </div> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기