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>
를 넣으세요.
즉 아래처럼 되어야 합니다.
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></a></p>
<p> <script src="js/test.js"></script></p>
<p></head></p>
<p><body></p>
<p> <div class="tab_wrap"></p>
<p> <div class="tab_menu_container"></p>
<p> <button class="tab_menu_btn on" type="button">채치수</button></p>
<p> <button class="tab_menu_btn" type="button">강백호</button></p>
<p> <button class="tab_menu_btn" type="button">서태웅</button></p>
<p> <button class="tab_menu_btn" type="button">송태섭</button></p>
<p> <button class="tab_menu_btn" type="button">정대만</button></p>
<p> <button class="tab_menu_btn" type="button">권준호</button></p>
<p> <button class="tab_menu_btn" type="button">양호열</button></p>
<p> </div> <!-- tab_menu_container e --></p>
<p> </p>
<p> <div class="tab_box_container"></p>
<p> <div class="tab_box on">고릴라 주장</div></p>
<p> <div class="tab_box">빨간 원숭이</div></p>
<p> <div class="tab_box">농구천재</div></p>
<p> <div class="tab_box">북산의 돌격대장</div></p>
<p> <div class="tab_box">돌아온 풍운아</div></p>
<p> <div class="tab_box">식스맨</div></p>
<p> <div class="tab_box">사실 작중 제일 멋쟁이</div></p>
<p> </div> <!-- tab_box_container e --></p>
<p> </div> <!-- tab_wrap e --></p>
<p> </div></p>
<p> </p>
<p><script></p>
<p>$('.tab_menu_btn').on('click',function(){</p>
<p> //버튼 색 제거,추가</p>
<p> $('.tab_menu_btn').removeClass('on');</p>
<p> $(this).addClass('on')</p>
<p> </p>
<p> //컨텐츠 제거 후 인덱스에 맞는 컨텐츠 노출</p>
<p> var idx = $('.tab_menu_btn').index(this);</p>
<p> </p>
<p> $('.tab_box').hide();</p>
<p> $('.tab_box').eq(idx).show();</p>
<p> });</p>
<p></script></p>
<p></body></p>
<p></html></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인