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();
});
이분꺼 참고했습니다.
답변 3
자바스크립트 시작부분과 끝 부분에 각각
<script> 와 </script>
를 넣으세요.
즉 아래처럼 되어야 합니다.
<!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확인하시면 됩니다.
