안녕하세요 혀코입니다.
오늘은 jQuery로 Tab UI를 구현하는 방법에 대해서 알아보겠습니다.
index.html 에 파일을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html lang="en">
<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>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.main li h2').on('click',function(){
$(this).addClass('open'); // 클릭한 h2에 open 클래스를 붙인다.
$(this).next().show(); // 클릭한 h2 다음 element인 p를 보이게한다.
$(this).parent().siblings().find('h2').removeClass('open'); // 다른 h2를 찾아서 open 클래스를 삭제한다.
$(this).parent().siblings().find('p').hide(); // 다른 p를 찾아서 hide로 보이지 않게 한다.
})
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
color: #999;
}
.wrapper {
width: 980px;
margin: 50px auto;
}
.main {
position: relative;
}
.main li {
float: left;
width: 25%;
background-color: #fff;
}
.main li h2 {
height: 60px;
line-height: 60px;
font-size: 24px;
color: #666;
padding: 0 20px;
background: #aaa;
cursor: pointer;
border: 1px solid #000;
}
.main li h2.open {
background-position: right bottom;
color: yellowgreen;
background-color: #fff;
}
.main li p {
background-color: #fff;
text-align: justify;
padding: 20px;
position: absolute;
left: 0;
display: none; /* 모든 p를 안보이게 설정한다. */
}
.main li:nth-child(2) p {
display: block; /* 두번째 p를 보이게 설정한다. */
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="main">
<li>
<h2>어벤저스</h2>
<p>
에너지원 ‘큐브’를 이용한 적의 등장으로 인류가 위험에 처하자 국제평화유지기구인
쉴드 (S.H.I.E.L.D)의 국장 닉 퓨리(사무엘 L.잭슨)는 [어벤져스] 작전을 위해
전 세계에 흩어져 있던 슈퍼히어로들을 찾아나선다. 아이언맨(로버트 다우니 주니어)부터
토르(크리스 헴스워스), 헐크(마크 러팔로), 캡틴 아메리카(크리스 에반스)는 물론,
쉴드의 요원인 블랙 위도우(스칼렛 요한슨), 호크 아이(제레미 레너)까지, 최고의
슈퍼히어로들이 [어벤져스]의 멤버로 모이게 되지만, 각기 개성이 강한 이들의 만남은
예상치 못한 방향으로 흘러가는데… 지구의 운명을 건 거대한 전쟁 앞에 [어벤져스]
작전은 성공할 수 있을까?
</p>
</li>
<li>
<h2 class="open">아이언맨</h2>
<p>
천재적인 두뇌와 재능으로 세계 최강의 무기업체를 이끄는 CEO이자, 타고난 매력으로
셀러브리티 못지않은 화려한 삶을 살아가던 억만장자 토니 스타크. 아프가니스탄에서
자신이 개발한 신무기 발표를 성공리에 마치고 돌아가던 그는 게릴라군의 갑작스런
공격에 의해 가슴에 치명적인 부상을 입고 게릴라군에게 납치된다. 가까스로 목숨을
건진 그에게 게릴라군은 자신들을 위한 강력한 무기를 개발하라며 그를 위협한다.
그러나 그는 게릴라군을 위한 무기 대신, 탈출을 위한 무기가 장착된 철갑수트를
몰래 만드는 데 성공하고, 그의 첫 수트인 ‘Mark1’를 입고 탈출에 성공한다.
</p>
</li>
<li>
<h2>시빌워</h2>
<p>
어벤져스와 관련된 사고로 부수적인 피해가 일어나자
정부는 어벤져스를 관리하고 감독하는 시스템인 일명 ‘슈퍼히어로 등록제’를 내놓는다.
어벤져스 내부는 정부의 입장을 지지하는 찬성파(팀 아이언맨)와 이전처럼 정부의 개입 없이
자유롭게 인류를 보호해야 한다는 반대파(팀 캡틴)로 나뉘어 대립하기 시작하는데...
</p>
</li>
<li>
<h2>저스티스리그</h2>
<p>
인류의 수호자인 슈퍼맨이 사라진 틈을 노리고 ‘마더박스’를 차지하기 위해 빌런 스테픈울프가
악마군단을 이끌고 지구에 온다.
마더박스는 시간과 공간, 에너지, 중력을 통제하는 범우주적인 능력으로 행성의 파괴마저도
초래하는 물체로
이 강력한 힘을 통제하기 위해 고대부터 총 3개로 분리되어 보관되고 있던 것.
인류에 대한 믿음을 되찾고 슈퍼맨의 희생 정신에 마음이 움직인 브루스 웨인은
새로운 동료인 다이애나 프린스에게 도움을 청해 이 거대한 적에 맞서기로 한다.
배트맨과 원더 우먼은 새로이 등장한 위협에 맞서기 위해 아쿠아맨, 사이보그, 플래시를 찾아
신속히 팀을 꾸린다.
이들 슈퍼히어로 완전체는 스테픈울프로부터 마더박스를 지키기 위해 지구의 운명을 건 전투를
벌인다!
</p>
</li>
</ul>
</div>
</body>
</html>
이렇게 jQuery로 Tab UI를 구현하는 방법에 대해서 알아보았습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글