버튼 클릭 시 클래스에 따라 show, hide 를 실행하고 싶습니다.
본문
버튼 클릭 시 클래스에 따라 show, hide 를 실행하고 싶습니다.
현재는 토글을 이용하여 버튼을 눌리면 열고 닫히고를 하는데
<div id="myDIV">
<button type="button" class="btn1" onclick="return showOrHide('menulink1');">1번</button>
<button type="button" class="btn1" onclick="return showOrHide('menulink2');">2번</button>
<button type="button" class="btn1" onclick="return showOrHide('menulink3');">3번</button>
</div>
function showOrHide(menu){
$("."+menu+"").toggle();
}
버튼이 5개있다면 5개 클래스를 따로 둬서 해당 버튼에 맞는 항목만 show 하고
나머지 항목은 hide를 시키고 버튼별로 작동하도록 하고 싶습니다..
토글을 사용하니 하나의 버튼을 눌리고 다른 버튼을 눌렀을 때 2개 클래스에 대해서 보여져서
혹시 자바스크립트를 이용하여 show, hide를 할 수 있을 지 문의드립니다.
답변 4
function showOrHide(menu){
$(".menulink1").hide();
$(".menulink2").hide();
$(".menulink3").hide();
$(".menulink4").hide();
$(".menulink5").hide();
$("."+menu).show();
}
<style>
#myDIV .show{
display:block
}
</style>
<div id="myDIV">
<button type="button" class="btn1" >1번</button>
<button type="button" class="btn1" >2번</button>
<button type="button" class="btn1" >3번</button>
</div>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#myDIV .show").removeClass('show');
$(this).addClass('show')
});
})
</script>
마르스님에 하나더 추가하면 1~5번은 한 클래스로해서 한번 hide 하시면 소스를 약간 줄일수 있습니다.
이렇게 처리하셔도 간단합니다.
<button class="btn btn1" onclick="$('.btn').hide(); $('.btn1').show();">버튼1</button>
<button class="btn btn2" onclick="$('.btn').hide(); $('.btn2').show();">버튼1</button>
<button class="btn btn3" onclick="$('.btn').hide(); $('.btn3').show();">버튼1</button>