자바스크립트 질문 채택완료
메뉴버튼 box1 box2 box3이 있습니다.
밑에는 이미지가 있고 전부 겹쳐있습니다.
처음에는 box2 box3가 display:none되어있다가
box2를 누르면 2번이미지가 보이면서 1번3번이미지는 none되고
box3을 누르면 3번임지ㅣ가 보이면서 1번2번이미지가 안보이게 하는 스크립 어떻게할까요..?
메뉴가2개면 서로 번갈아가면서 누를때 none하면되는데 동시에 2개는 잘 모르겠습니다 ㅜㅜ
답변 2개
채택된 답변
+20 포인트
HappyTank
5년 전
이렇게 하시면 될 듯 요.
Copy
box1
box2
box3
$("#box1").click(function(ev) { $("#box1").show(); $("#box2").hide(); $("#box3").hide(); });
$("#box2").click(function(ev) { $("#box1").hide(); $("#box2").show(); $("#box3").hide(); });
$("#box3").click(function(ev) { $("#box1").hide(); $("#box2").hide(); $("#box3").show(); });
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
BiHon
5년 전
동작하지 않아도 작성된 코드를 질문에 포함시키면 답변을 얻는데 도움이 되겠죠?
구현 방법은 다양합니다. 아래는 jQuery를 이용해 간단하게 구현한 방법입니다.
jQuery를 사용하지 않아도 같은 방식-다 숨기고, 지정 인덱스만 보이게-으로 구현이 가능합니다.
Copy
.box:not(:nth-of-type(1)) { display: none; } /* 처음 제외한 나머지 숨김 */
box1
box2
box3
box1
box2
box3
$('.btn').on('click', function() {
$('.box').hide().eq($(this).index()).show();
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인