카테고리 없음
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>
<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"/>
<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도 알아두시면 좋을겁니다~