탭메뉴 구현이 안되요 도와주세요 ㅠㅠ

탭메뉴 구현이 안되요 도와주세요 ㅠㅠ

QA

탭메뉴 구현이 안되요 도와주세요 ㅠㅠ

본문

 

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>

처럼 제이쿼리를 연결시켜야 정상적으로 작동됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT