메인메뉴 바로가기

HOME으로 가기


Javascript

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

본문

 

---------- 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");
}
});

 

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