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