[jQuery] 멀티탭 구현2
08 Oct 2021 -
1 minute read
제이쿼리를 이용해 멀티탭 구현하기 2
See the Pen 멀티탭구현 2 by Jinsol (@losuif) on CodePen.
HTML
<!DOCTYPE html>
<html lang="ko">
<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">
<title>멀티탭구현</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<h1>
멀티탭 구현
</h1>
<div id="wrap">
<div id="tabBtn">
<button type="button" class="btnSelected">공지사항</button>
<button type="button">갤러리</button>
</div>
<!-- div#tabBtn -->
<div id="notice" class="tabContents">
<table>
<tr>
<td>3월 재입고 품목을 알려드립니다.</td>
<td>2020.03.14</td>
</tr>
<tr>
<td>반품/환불 규정에 대해 알려드립니다.</td>
<td>2020.03.14</td>
</tr>
<tr>
<td>S/S 시즌 신규 의류 신상품 안내</ul>
<td>2020.03.14</td>
</tr>
<tr>
<td>신규회원 대상 할인 이벤트 안내</td>
<td>2020.03.14</td>
</tr>
</table>
</div>
<!-- div#notice -->
<div id="gallery" class="tabContents">
<table>
<tr>
<td>
<img src="https://cdn.pixabay.com/photo/2021/04/29/07/36/lime-6215762__340.jpg" alt="이미지1" width="90px" height="90px">
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2021/09/07/16/31/nature-6604374__340.jpg" alt="이미지2" width="90px" height="90px">
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2021/09/19/12/19/animal-6637774__340.jpg" alt="이미지3" width="90px" height="90px">
</td>
</tr>
</table>
</div>
<!-- div#gallery -->
</div>
<!-- div#wrap -->
<script src="script/jquery-3.6.0.min.js"></script>
<script src="script/script.js"></script>
</body>
</html>
CSS
@charset "UTF-8";
div#wrap{
margin: 20px auto;
width: 430px;
border: 1px solid #000;
padding: 30px;
}
h1{
font-size: 36px;
text-align: center;
margin: 20px auto;
}
#tabBtn {
padding-left: 10px;
display: flex;
}
button {
font-size: 20px;
font-weight: bold;
border: 1px solid #aaa;
padding: 2px 10px;
cursor: pointer;
position: relative;
top: 1px;
}
button:first-child {
left: 1px;
}
.btnSelected {
background-color: #fff;
border-bottom: none;
}
table {
width: 400px;
height: 130px;
margin: 0 auto;
}
div#gallery {
display: none;
}
#gallery td {
/* 갤러리 이미지 가운데 정렬 위함 */
text-align: center;
}
div.tabContents {
border: 1px solid #aaa;
}
JavaScript
$(function(){
$("button").click(function(){
//모든 버튼 선택되지 앟은 상태의 스타일로 만들기
$("button").css({
"background-color": "#efefef",
"border-bottom": "1px solid #aaa"
});
// 선택(클릭)한 버튼 스타일 적용
$(this).css({
"background-color": "#fff",
"border-bottom": "none"
});
let btnTxt = $(this).text();
btnTxt = btnTxt.trim();
$("div.tabContents").css({"display": "none"});
if (btnTxt == "공지사항") {
$("div#notice").css({"display": "block"});
} else if (btnTxt == "갤러리") {
$("div#gallery").css({"display": "block"});
}
});
});