탭메뉴 구현이 안되요 도와주세요 ㅠㅠ
본문
https://codepen.io/kcarl/pen/OJVMZmM
위에 내용이 정리가 잘되있고 간편해보여서
따라해봤는데 왜 저는 안될까요 ㅠㅠ
어딜놓친건지 모르겠어요. 생초보입니다 ㅠㅠ
조언부탁드려요 복받으실거예요!ㅜㅜ
<script type="text/javascript">
$('.tab_menu_btn').on('click',function(){
//버튼 색 제거,추가
$('.tab_menu_btn').removeClass('on');
$(this).addClass('on')
//컨텐츠 제거 후 인덱스에 맞는 컨텐츠 노출
var idx = $('.tab_menu_btn').index(this);
$('.tab_box').hide();
$('.tab_box').eq(idx).show();
});
</script>
<style>
button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.tab_menu_container {
display:flex;
}
.tab_menu_btn {
width:80px;
height:40px;
transition:0.3s all;
}
.tab_menu_btn.on {
border-bottom:2px solid #df0000;
font-weight:700;
color:#df0000;
}
.tab_menu_btn:hover {
color:#df0000;
}
.tab_box {
display:none;
padding:20px;
}
.tab_box.on {
display:block;
}
</style>
<div class="tab_wrap">
<div class="tab_menu_container">
<button class="tab_menu_btn on" type="button">채치수</button>
<button class="tab_menu_btn" type="button">강백호</button>
<button class="tab_menu_btn" type="button">서태웅</button>
<button class="tab_menu_btn" type="button">송태섭</button>
<button class="tab_menu_btn" type="button">정대만</button>
<button class="tab_menu_btn" type="button">권준호</button>
<button class="tab_menu_btn" type="button">양호열</button>
</div> <!-- tab_menu_container e -->
<div class="tab_box_container">
<div class="tab_box on">고릴라 주장</div>
<div class="tab_box">빨간 원숭이</div>
<div class="tab_box">농구천재</div>
<div class="tab_box">북산의 돌격대장</div>
<div class="tab_box">돌아온 풍운아</div>
<div class="tab_box">식스맨</div>
<div class="tab_box">사실 작중 제일 멋쟁이</div>
</div> <!-- tab_box_container e -->
</div> <!-- tab_wrap e -->
답변 2
jquery를 이미 추가하셨다면
<script>
...
</script>
위의 스크립트 부분을 <body> 테그의 제일 마지막으로 위치를 변경하시거나
스크립트 부분을 아래처럼 수정하시면 됩니다.
<script type="text/javascript">
$(document).ready(function(){
$('.tab_menu_btn').on('click',function(){
//버튼 색 제거,추가
$('.tab_menu_btn').removeClass('on');
$(this).addClass('on')
//컨텐츠 제거 후 인덱스에 맞는 컨텐츠 노출
var idx = $('.tab_menu_btn').index(this);
$('.tab_box').hide();
$('.tab_box').eq(idx).show();
});
});
</script>
화면의 DOM 객체들이 로딩이 되기 전에 스크립트가 실행되서 그럽니다.
DOM 개체 로딩이 모두 끝나고 나서 스크립트를 실행해야 스크립트에서 DOM 객체를 찾을 수 있습니다.
감사합니다! 주신 아래 소스로 작업하니바로되네요!!!
위에 소스를 찾아보다보니 윗분말씀대로 소스를 넣어야만 실행되더라구요.
그런데, 예시 소스 설명블로그에서는 그런내용이없길래 오픈소스없이도 될거같았는데
정확히 해답을주셨어요. dom..객체 잘모르겠지만 공부하면서 무릎을 탁칠날이 올거같습니다!!
너무감사합니다!
생각나는 이유중 하나가 혹시 저 주소의 소스를 그대로 가져다가 쓰셨나요?
해당사이트의 소스코드는 자바스크립트 기반의 제이쿼리라는 오픈라이브러리 형식이 적용된 소스입니다
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
처럼 제이쿼리를 연결시켜야 정상적으로 작동됩니다.
네 맞아요 말씀하신대로 해당 소스를 넣지않았었네요 ㅠㅠ 감사합니다.
근데 근본적으로 저 소스없이도 사용하고싶더라구요 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
