안녕하십니까 선생님 tab기능 숙제하다
선생님 제 코드는 서로 연동이 안되는 것 같습니다.
js파일을 html파일에 집어넣어서 코드를 짜고싶었습니다.
콘솔창을 보면 분명 html파일안에 js파일이 포함되어있는데 이상하게 동작하지 않습니다.
한번 봐주시면 좋겠습니다.
ditail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="/css/ditail.css" rel="stylesheet">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="/detail.js"></script>
</head>
<body class="body">
<div class="container mt-5">
<ul class="list">
<li class="tab-button">Products</li>
<li class="tab-button orange">Information</li>
<li class="tab-button">Shipping</li>
</ul>
<div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
ditail.js
$('.tab-button').on('click',function(){
var x=$(this).index()
console.log(x)
$('.tab-button').removeClass('orange')
$('.tab-content').removeClass('show')
$('.tab-button').eq(x).addClass('orange')
$('.tab-content').eq(x).addClass('show')
});
js안에 있는 코드를 html안에서 짜서 밖으로 빼놨습니다.
html안에서 script에 넣고 실행하면 잘 작동합니다.
