SIR
목록으로

jquery가 인식이 안돼요... 채택완료

주니준이
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 2,438
답변 3
목록

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="js/test.js"></script>

</head>

<body>

    <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 -->

</body>

</html>

 

 

$('.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();

  });

 

 

 

 

이분꺼 참고했습니다.

https://velog.io/@kcarl/tabmenulayout

#jquery

답변 3개

채택된 답변
+20 포인트

자바스크립트 시작부분과 끝 부분에 각각

<script> 와 </script>

를 넣으세요.

 

즉 아래처럼 되어야 합니다.

Copy 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="js/test.js"></script>

</head>

<body>

    <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 -->

    </div>

 

<script>

$('.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>

</body>

</html>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

앗 그렇네요

<script>함수내용</script>

 

앞뒤가 누락된것 같은데요...

개발자도구에서 console확인하시면 됩니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

경로는 다 재대로 넣었습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고