TAB 메뉴

  <공통 HTML>

<div id="tab">

<ul class="navi">

<li><a href="#tab1" class="on">button1</a></li>

<li><a href="#tab2">button2</a></li>

<li><a href="#tab3">button3</a></li>

<li><a href="#tab4">button4</a></li>

</ul>

<div id="tab1" class="box">

Contents1

</div>

<div id="tab2" class="box">

Contents2

</div>

<div id="tab3" class="box">

Contents3

</div>

<div id="tab4" class="box">

Contents4

</div>

</div>

  <공통 CSS>

#tab {

   width:1000px; height:400px; border:1px solid #000;

   position:relative; margin:100px auto;

}

.navi {

   width:200px; height:400px; position:absolute; top:0px; left:0px;

}

.navi a {

   display:block; width:200px; height:100px; background:#555;

   font:20px/100px "Aldrich"; color:#ccc; text-align:center;

}

.navi a.on {

   background:#111; color:orange;

}

.box {

   width:800px; height:400px; position:absolute; top:0px; right:0px;

   font:100px/400px "Aldrich"; color:#444; text-align:center; display:none;

}

#tab1 {

   display:block;

}

JS - 간소화버전

$(document).ready(function(){

var $navi;

initDOM();

bindingEvent();

});

// DOM 초기화

function initDOM(){

$navi = $(".navi>li");

}

// 이벤트 바인딩

function bindingEvent(){

// 네비게이션

$navi.on("click",function(){

$navi.children("a").removeClass("on")

$(this).children("a").addClass("on");

$(".box").css({"display":"none"});

var tg = $(this).children('a').attr('href')

$(tg).stop().fadeIn(200)

console.log($(this).children("a").attr('href'))

});

}