버튼 클릭 시 클래스에 따라 show, hide 를 실행하고 싶습니다.

버튼 클릭 시 클래스에 따라 show, hide 를 실행하고 싶습니다.

QA

버튼 클릭 시 클래스에 따라 show, hide 를 실행하고 싶습니다.

답변 4

본문

버튼 클릭 시 클래스에 따라 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>

이렇게 처리하셔도 간단합니다.

<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>

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #hide ×
전체 9
© SIRSOFT
현재 페이지 제일 처음으로