Javascript로 html 탭 기능 구현

자주 쓰는 기능이기에 간단한 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;

}

결과는 아래 링크에서 확인할 수 있음.

codepen에서 보기