반응형
dataTab.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/dataTab.css">
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/dataTab.js"></script>
</head>
<body>
<div class="container">
<h1>css/jquery 데이터 탭</h1>
<div class="content">
<ul class="tab_wrap">
<li class="active" data-tab="tab1">
<a href="javascript:void(0);">Tab1</a>
</li>
<li data-tab="tab2">
<a href="javascript:void(0);">Tab2</a>
</li>
<li data-tab="tab3">
<a href="javascript:void(0);">Tab3</a>
</li>
<li data-tab="tab4">
<a href="javascript:void(0);">Tab4</a>
</li>
</ul>
<div id="tab1" class="tab_cont active">1번탭에 대한내용입니다.</div>
<div id="tab2" class="tab_cont">2번탭에 대한내용입니다.</div>
<div id="tab3" class="tab_cont">3번탭에 대한내용입니다.</div>
<div id="tab4" class="tab_cont">4번탭에 대한내용입니다.</div>
</div>
</div>
</body>
</html>dataTab.scss
@charset 'UTF-8';
.container{
width:1080px; margin:0 auto;
h1{padding:20px;border-bottom:1px solid #ccc;}
.content{
padding:40px;
.tab_wrap{
overflow:hidden;
li{
float:left;
&.active{
background:#bababa;
}
a{
display:inline-block;
text-align:center;
padding:14px 16px;
font-size:17px;
transition:0.3s;
}
}
}
.tab_cont{
display:none;
background:#bababa;
padding:6px 16px;
min-height:300px;
&.active{
display:block;
}
}
}
}dataTab.js
$(function() {
$('ul.tab_wrap li').click(function() {
var activeTab = $(this).attr('data-tab');
$('.tab_wrap li').removeClass('active');
$('.tab_cont').removeClass('active');
$(this).addClass('active');
$('#' + activeTab).addClass('active');
})
});
반응형
'jQuery' 카테고리의 다른 글
| jQuery와 javascript의 차이점? (1) | 2020.10.21 |
|---|