탭은 이런걸 말하는거다.
새 HTML에 부트스트랩과 Jquery만 남겨놓고
<style>
ul.list {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
}
ul.list::after {
content: '';
display: block;
clear: both;
}
.tab-button {
display: block;
padding: 10px 20px 10px 20px;
float: left;
margin-right: -1px;
margin-bottom: -1px;
color: grey;
text-decoration: none;
cursor: pointer;
}
.orange {
border-top: 2px solid orange;
border-right: 1px solid #ccc;
border-bottom: 1px solid white;
border-left: 1px solid #ccc;
color: black;
margin-top: -2px;
}
.tab-content {
display: none;
padding: 10px;
}
.show {
display: block;
}
</style>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>detail</title>
</head>
<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>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="/tab.js"></script>
</body>
</html>
이렇게 집어넣어고 일단 시작하자.
참고로 JS가 너무 길면 다음과 같이 파일로 따로 뺄 수 있다
<script src="어쩌구.js"></script>
그런데 필자는 저렇게 바로 js파일이 안먹어서 "/tap.js"를 사용했다.
아무튼 첫 번째 버튼을 클릭하면 위에 오렌지 표식이 나면서 해당하는 content를 띄우는 JS는
$('.tab-button').eq(0).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(0).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(0).addClass('show');
});이것이다. 여기서 eq(0)은 인덱싱하는 의미로, $가 querySelectorAll의미를 지녔기 때문임을 유의한다.
document.querySelectorAll('list-group-item)[2]
이렇게 주었던 인덱싱을 .eq(0) 이런식으로 준 것이다.
그런데 문제는 버튼 1번째에 대해서 이리 만들었는데 이런 비슷한 코드를 똑같이 2개 더 만들어야된다는 점이다.
여기서 for문의 활용법이 나온다.
i을 0으로 선언하고 3미만일때 1씩 증가시키는 반복문 for. 그런데 var대신 let을 써야 작동된다. 이유는
for (let i = 0; i < 3; i++){
$('.tab-button').eq(i).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(i).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(i).addClass('show');
});
}
이벤트리스너(on)는 클릭해야 작동하는데 for는 그에 상관없이 혼자서 반복하고있기 때문이다.
따라서 let을 써야 이벤트리스너와 연동이 된다.
확장성있는 좋은코드 짜기. (버튼이 여러개 늘어난다면?)
for (let i = 0; i < $('.tab-button').length; i++){
$('.tab-button').eq(i).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(i).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(i).addClass('show');
})
};html의 개수를 측정하기위해 length를 사용하다.
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| Scroll (0) | 2023.11.07 |
|---|---|
| Regular Expression(정규식), 캐러셀, toFixed, parseFloat (0) | 2023.11.07 |
| JS에 if문 적용해서 로그인 창, 다크모드, time (0) | 2023.11.07 |
| bootstrap이용한 서브메뉴, classList, jQuery (1) | 2023.11.03 |
| 기본 JS 및 동적 UI 만들기 (0) | 2023.11.03 |
