JavaScript 입문과 웹 UI개발(18)-탭기능 만들며 배우는 for 반복문
2022. 10. 7. 17:28ㆍ애플코딩 javascript 강의
반응형
detail.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<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>
<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="tab.js"></script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>tab.js
// 버튼 누르면
// -모든 버튼에 붙은 orange 클래스명 제거
// -버튼 0에 orange 클래스명 추가
// - div에 클래스명 추가
// -모든 div에 붙은 show 클래스명 제거
//버튼 클릭시 이벤트 처리 함수===============
// 선택자에 해당하는게 여러게 있으면 eq()로 해당 index를 선택할 수 있다.
//orange,show 클래스 전체 제거 후 해당 버튼에 orange, show 추가
// for(var i=0; i<3; i++){
// $('.tab-button').eq(i).on('click', function(){
// $('.tab-button').removeClass('orange');
// $('.tab-content').removeClass('show');
// //버튼 클릭시 해당 버튼 오랜지 색으로
// $('.tab-button').eq(i).addClass('orange');
// //버튼 클릭시 해당 내용이 나오도록 함
// $('.tab-content').eq(i).addClass('show');
// })
// }
//===================================
for(let i=0; i< $('.tab-button').length; i++){ //var i로 선언하면 안된다. var은 변수 범위가 function이고 let 변수는 { }이다.
$('.tab-button').eq(i).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');
//버튼 클릭시 해당 버튼 오랜지 색으로
$('.tab-button').eq(i).addClass('orange');
//버튼 클릭시 해당 내용이 나오도록 함
$('.tab-content').eq(i).addClass('show');
})
}강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(20)-dataset을 이용한 tab 기능 (0) | 2022.10.07 |
|---|---|
| JavaScript 입문과 웹 UI개발(19)-이벤트 버블링과 이벤트관련 함수들 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(17)- 스크롤 이벤트로 만드는 재밌는 기능들 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기 (0) | 2022.10.04 |
| JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 (0) | 2022.10.04 |