자주 쓰는 기능이기에 간단한 javascript로 tab 기능을 구현해 보았음.
로직:
클릭이 일어났을 때 showtab() 함수를 돌리고 함수에 포함된 반복문으로 파라메터와 탭 번호가 같은지 대조하여 같으면 display: block;, 다르면 display:none; 으로 처리하도록 하였다.
Javascript
function showtab(a){
for(i = 0 ; i <=2 ; i++){
var target = document.getElementById('tab' + i)
if(i == a){
target.style.display = 'block';
} else {
target.style.display = 'none';
}
}
}
HTML
<ul>
<li><a href="javascript:;" onclick="javascript:showtab(0);">show first tab</a></li>
<li><a href="javascript:;" onclick="javascript:showtab(1);">show second tab</a></li>
<li><a href="javascript:;" onclick="javascript:showtab(2);">show third tab</a></li>
</ul>
<div id="tab0" class="tab">
first tab
</div>
<div id="tab1" class="tab">
second tab
</div>
<div id="tab2" class="tab">
third tab
</div>
CSS
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin-right: 15px;
}
.tab {
width: 240px;
height: 240px;
text-align: center;
background-color: red;
color: #fff;
padding: 30px;
display: none;
}
#tab0 {
display: block;
}
결과는 아래 링크에서 확인할 수 있음.
WRITTEN BY
- artfrige
베이스 연주는 건강에 좋습니다