.hasClass('on'); .removeClass('on'); .addClass('on'); > Javascript

본문 바로가기
HOME

Javascript

제이쿼리 | .hasClass('on'); .removeClass('on'); .addClass(&…

페이지 정보

작성자 너갱이 작성일15-01-29 11:09 조회8,527회 댓글0건

본문

 

---------- CSS ----------------

 

<style>

ul { list-style:none; }

button { width:100px; height:50px; }

button.on { border: 5px solid red; }

</style> 

 

 

 

 

-------------- HTML ---------------

 

<ul id="sample">
 <li><button class="on">1</button></li>
 <li><button>2</button></li>
 <li><button>3</button></li>
 <li><button>4</button></li>
</ul>

 

 

 

 

------------------ JS ----------------

 

$("#sample>li>button").click(function(e){
e.stopPropagation(); 

if( !$(this).hasClass("on") ){
$("#sample>li>button.on").removeClass("on");
$(this).addClass("on");
}
});

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기


구)밤톨넷 PC 버전으로 보기