주니오주니
180
2020-10-31 03:00:47
1
1621

jquery 연동이 안돼요....


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

0
  • 답변 1

  • RWB
    351
    2020-10-31 03:11:24 작성 2020-10-31 03:13:09 수정됨


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


    위 코드로 변경하시면 됩니다.

    다른건 동일하고, $(document).ready(); 구문을 추가한 것입니다.

    해당 코드는 JQuery에서 페이지가 로딩될 경우 수행하는 콜백함수입니다.

    바닐라 자바스크립트의 아래 동작과 동일합니다.


    js/test.js

    function init()
    {
    	$(".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();
    	});
    }


    index.html

    <body onload="init();">
        <!-- 내용 -->
    </body


    자바스크립트 처음 접하실 때 간간히 하는 실수인데, JS파일에 로딩 시 동작할 구문을 작성하면 끝이 아니라 HTML 로딩 시 해당 구문을 호출해줘야 정상적으로 동작합니다.


    질문자분이 작성하신 코드는 구문은 정상적이지만, 정작 해당 구문이 호출이 안 되어 이벤트 적용이 되지 않은 것이라 이해하시면 됩니다.

  • 로그인을 하시면 답변 을 등록할 수 있습니다.