Tab UI
for 반복문
for 반복문에서 var는 안되고 let은 가능한 이유?
Last updated
Last updated
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<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>
<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>스펙설명 탭 Spec</p>
</div>
<div class="tab-content">
<p>배송정보 탭 Shipping</p>
</div>
</div>
<script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Blog about personal projects written mostly in JavaScript with AngularJS and Node.js. MongoDB is a guest too.">
<meta name="author" content="Kevin Delemme">
<meta name="fragment" content="!">
<title>Kevin Delemme - JavaScript Addict - Personal projects written mostly with AngularJS, Node.js and MongoDB</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/style.css" rel="stylesheet">
<link href="dist/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/wysiwyg/css/bootstrap3-wysiwyg5.css" rel="stylesheet">
</head>
<body ng-app="app">
<div class="container col-sm-12">
<header class="header">
<h1 class="header-title">
<a href="#">
<i class="fa fa-code"></i> Kevin Delemme
</a>
</h1>
</header>
<div ng-view></div>
</div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/jquery/jquery-2.0.3.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="dist/js/blog.js"></script>
<script src="lib/wysiwyg/js/wysihtml5-0.3.0.min.js"></script>
<script src="lib/wysiwyg/js/bootstrap3-wysihtml5.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46674011-1', 'kdelemme.com');
ga('send', 'pageview');
</script>
</body>
</html><script src="js/app.js"></script>$('.tab-button').eq(0).on('click', function (){
$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');
$('.tab-button').eq(0).addClass('orange');
$('.tab-content').eq(0).addClass('show');
})
$('.tab-button').eq(1).on('click', function (){
$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');
$('.tab-button').eq(1).addClass('orange');
$('.tab-content').eq(1).addClass('show');
})
$('.tab-button').eq(2).on('click', function (){
$('.tab-button').removeClass('orange');
$('.tab-content').removeClass('show');
$('.tab-button').eq(2).addClass('orange');
$('.tab-content').eq(2).addClass('show');
})
var tabBtn = $(".tab-button");
var tabContent = $(".tab-content");
tabBtn.eq(0).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(0).addClass('orange');
tabContent.eq(0).addClass('show');
})
tabBtn.eq(1).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(1).addClass('orange');
tabContent.eq(1).addClass('show');
})
tabBtn.eq(2).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(2).addClass('orange');
tabContent.eq(2).addClass('show');
})for(var i = 0; i < 10; i++){
console.log(i);
}for (let i = 0; i<3; i++){
tabBtn.eq(i).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(i).addClass('orange');
tabContent.eq(i).addClass('show');
})
}tabBtn.eq(3).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(3).addClass('orange');
tabContent.eq(3).addClass('show');
})