탭연습

자바스크립트 탭 연습

마크업

<div id="tab_wrap">

<ul id="tab">

<li><a href="#tab_cont1" class="on">Tab1</a></li>

<li><a href="#tab_cont2">Tab2</a></li>

<li><a href="#tab_cont3">Tab3</a></li>

<li><a href="#tab_cont4">Tab4</a></li>

<li><a href="#tab_cont5">Tab5</a></li>

</ul>

<div id="tab_cont1" class="tab_cont">Cont1</div>

<div id="tab_cont2" class="tab_cont" style="display:none">Cont2</div>

<div id="tab_cont3" class="tab_cont" style="display:none">Cont3</div>

<div id="tab_cont4" class="tab_cont" style="display:none">Cont4</div>

<div id="tab_cont5" class="tab_cont" style="display:none">Cont5</div>

</div>

자바스크립트

<script type="text/javascript">

// Tab

var tabFun = function(tabAreaId){

var tab_wrap = document.getElementById(tabAreaId),

tabNav = tab_wrap.getElementsByTagName("ul")[0],

tabLink = tabNav.getElementsByTagName("a"),

linkArr = [];

for(var i=0; i<tabLink.length; i++){

var link_href = tabLink[i].getAttribute("href").split("#")[1];

linkArr.push(link_href);

tabLink[i].onclick = function(){

var href_value = this.hash.split("#")[1];

for(var j=0; j<linkArr.length; j++){

tabLink[j].className = '';

document.getElementById(linkArr[j]).style.display = "none";

if(href_value == linkArr[j]){

this.className = 'on';

document.getElementById(href_value).style.display = "block";

}

}

return false;

}

}

}

tabFun('tab_wrap');

</script>

TEST

• Tab1
• Tab2
• Tab3
• Tab4
• Tab5

Cont1

Cont2

Cont3

Cont4

Cont5