티스토리 뷰

카테고리 없음

JQUERY 숨기기 보이기

Beat. 2016. 9. 5. 10:56

JQUERY를 이용해서 숨기기 보이기를 하는것은 자바스크립트에 비해서 간단한데요.


div를 숨기기 보이기 2가지 방법을 알려드리겠습니다.


<body>안에 복사붙여넣기 하시고 바로실행 해주세요.

<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 //보이기1
 $('#btn_show1').click(function() {
  $("#test_div").css('display','block');
 });
 
 //숨기기1
 $('#btn_hide1').click(function() {
  $("#test_div").css('display','none');
 });
 
 //보이기2
 $('#btn_show2').click(function() {
  $("#test_div").show();
 });
 
 //숨기기2
 $('#btn_hide2').click(function() {
  $("#test_div").hide();
 });
});
</script>

 <div id="test_div" style="border: 1px solid">Jquery 숨기기 보이기</div>
 
 <input type="button" value="보이기1" id="btn_show1"/>
 <input type="button" value="숨기기1" id="btn_hide1"/>
 
 <input type="button" value="보이기2" id="btn_show2"/>
 <input type="button" value="숨기기2" id="btn_hide2"/>


<body>안에 복사붙여넣기 하시고 바로실행 해주세요.

2가지 방법을 알아봤는데요.

$("#id").css('display','block');
$("#id").css('display','none');

$("#id").show();
$("#id").hide();

간단하죠?

show()와 hide()가 더간단하지만 display:block,none도 알아두시면 좋을겁니다~






공유하기 링크
댓글