반응형
[javascript] 간단한 탭메뉴 구현하기
예전에 보다 간단한 탭메뉴를 찾으려 열심히 구글링했던 때가 있었는데요,
거기서 단비처럼 찾아낸 탭메뉴를 구현해볼까 합니다. 코드도 무척 단순해서 따라하시기 쉬우실거에요.
먼저 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.
body{
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
width: 500px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
그 다음 html에 탭에 넣을 내용들을 적어넣습니다.
ul.tas의 li는 탭을 누를 메뉴가 되고 그 아래, class값이 tab-content인 부분들은 전부 메뉴의 내용들이 됩니다.
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
</ul>
<div id="tab-1" class="tab-content current">
---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ----
</div>
<div id="tab-2" class="tab-content">
---- ---- ★------ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ★-- ---- ---- ------★ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- ★------ ---- ---- ---- ----
</div>
<div id="tab-3" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
</div>
</div>
마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] select box css 디자인 (0) | 2017.07.19 |
|---|---|
| [javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
| [javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
| [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3) | 2017.06.22 |
| [javascript] 심플 이미지 슬라이더 (0) | 2017.06.13 |
jQueryRotateCompressed.js
