2020. 1. 12. 12:39ㆍJAVASCRIPT
실행 : https://codepen.io/ffuqgvsz/pen/RwNyqvE
jQuery를 이용한 탭 메뉴
...
codepen.io
공부 : trigger() -> 강제로 이벤트를 실행하는 함수
event.delegateTarget -> 이벤트 핸들러가 처리되고있는 요소의 상위에 부착한다.
예) 상자 클래스의 단추를 클릭하면 상자의 배경색을 빨간색으로 바꿉니다.
$( ".box" ).on( "click", "button", function( event ) {
$( event.delegateTarget ).css( "background-color", "red" );
});
<!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>
<style>
.tab {
border: 1px solid #000;
}
a {
text-decoration: none;
}
.menu,
.content {
list-style: none;
margin: 0 auto;
padding: 0;
}
.menu::after {
content: "";
display: block;
clear: both;
}
.menu > li {
float: left;
width: 25%;
box-sizing: border-box;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.menu > li:first-child {
border-left: none;
}
.menu > li > a {
display: block;
text-align: center;
color: inherit;
line-height: 30px;
}
.menu > li.active {
background-color: #ccc;
}
.content {
padding: 10px;
}
.content > li {
display: none;
}
.content > li.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul class="menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<ul class="content">
<li>
<h2>content1</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis sequi
odio iusto maiores, eius cum aperiam saepe, cupiditate iure natus
quisquam deleniti aliquam dolorem perspiciatis! Et unde sapiente,
similique quas exercitationem, quae vero accusantium omnis adipisci ut
placeat. Labore voluptatibus adipisci reiciendis repellendus maiores,
culpa ea laudantium voluptate assumenda excepturi.
</li>
<li>
<h2>content2</h2>
Sunt, delectus? Explicabo sunt sapiente culpa perferendis vitae, eaque
repellendus laborum aliquid, numquam itaque quisquam voluptas omnis
velit veniam, inventore repudiandae expedita voluptates blanditiis
quia voluptatem non delectus deleniti asperiores quibusdam. Minus
necessitatibus quis alias ratione deleniti atque harum at voluptatem
cum error, itaque ad nesciunt corrupti? Sit, temporibus consectetur.
</li>
<li>
<h2>content3</h2>
Reprehenderit minus doloribus laborum eum animi deleniti illo,
quaerat, quod, eligendi alias itaque atque magni? A odio vero repellat
consequatur reprehenderit cum aspernatur minus molestiae? Est tempora
officiis natus, dolor voluptate accusamus incidunt cum possimus sit
necessitatibus veritatis facilis totam suscipit deleniti maxime minus
ab officia eos. Necessitatibus, nam at!
</li>
<li>
<h2>content4</h2>
Praesentium maxime reiciendis in corporis, nulla asperiores magnam
doloremque alias nisi ipsam quia sint incidunt, impedit repudiandae
qui fugiat ipsum? Modi, ullam blanditiis quasi illo sint tempore totam
sapiente voluptatem pariatur debitis consequatur qui dicta ipsa porro
inventore earum rerum aperiam. Id dolor dolorum atque iure debitis,
est nobis error?
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".tab")
//.tab > .menu a를 클릭했을 때 이벤트
.on("click", ".menu a", function(e) {
var $parent = $(this).parent();
var _index = $parent.index();
//e-> .tab기준으로 자식요소를 찾는다
var $content = $(e.delegateTarget)
.find(".content li")
.eq(_index);
e.preventDefault();
$parent
.add($content)
.addClass("active")
.siblings()
.removeClass("active");
})
//처음 menu버튼은 눌러져 있는 상태로 만들기
.find(".menu a")
.eq(0)
//강제로 클릭이벤트 삽입
.trigger("click");
</script>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| JS async & await (0) | 2020.01.14 |
|---|---|
| JS Promise란 (0) | 2020.01.14 |
| JS를 이용한 가위바위보 게임 (0) | 2020.01.10 |
| 동기와 비동기 (0) | 2020.01.09 |
| JS로 만든 숫자야구게임 (0) | 2020.01.09 |