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