팀교육 : 탭메뉴

HTML

<div id="tab_nav">
 <div class="section" id="tab1">
     <h2><a href="#">공지사항</a></h2>
        <ul>
         <li><a href="#">공지사항 리스트입니다.</a></li>
         <li><a href="#">공지사항 리스트입니다.</a></li>
         <li><a href="#">공지사항 리스트입니다.</a></li>
         <li><a href="#">공지사항 리스트입니다.</a></li>
         <li><a href="#">공지사항 리스트입니다.</a></li>
        </ul>
    </div>
 <div class="section" id="tab2">
     <h2><a href="#">보도자료</a></h2>
        <ul>
         <li><a href="#">보도자료 리스트입니다.</a></li>
         <li><a href="#">보도자료 리스트입니다.</a></li>
         <li><a href="#">보도자료 리스트입니다.</a></li>
         <li><a href="#">보도자료 리스트입니다.</a></li>
         <li><a href="#">보도자료 리스트입니다.</a></li>
        </ul>
    </div>
 <div class="section" id="tab3">
     <h2><a href="#">이벤트</a></h2>
        <ul>
         <li><a href="#">이벤트 리스트입니다.</a></li>
         <li><a href="#">이벤트 리스트입니다.</a></li>
         <li><a href="#">이벤트 리스트입니다.</a></li>
         <li><a href="#">이벤트 리스트입니다.</a></li>
         <li><a href="#">이벤트 리스트입니다.</a></li>
        </ul>
    </div>
</div>

---

CSS

#tab_nav {width:190px; min-height:110px; border:4px solid #E6E6E6; padding:6px; overflow-y:auto}
#tab_nav h2 {background:#999; color:#fff; font-weight:bold;}
#tab_nav h2 a {display:block; padding:5px}
#tab_nav ul {padding:5px 0}
#tab_nav ul li {margin-bottom:3px}
.js_on .section {position:relative}
.js_on .section h2 {float:left;}
.js_on .section ul {position:absolute; top:23px; display:none}
div.tab1 #tab1 ul,
div.tab2 #tab2 ul,
div.tab3 #tab3 ul {display:block}
div.tab1 #tab1 h2,
div.tab2 #tab2 h2,
div.tab3 #tab3 h2 {background:#000000;}
div.tab1 #tab1 h2 a,
div.tab2 #tab2 h2 a,
div.tab3 #tab3 h2 a {color:#fff}

---

JQUERY

jQuery(function($){
 $("#tab_nav").attr("class","js_on tab1"); //로드되면서 js 먹을때의 클래스와 첫번째 탭 활성화 클래스 부여
 var tabH2 = $("#tab_nav h2"); // 탭으로 사용될 h2를 변수로 저장
 function changetab(){
  var tabNum = $(this).parent("h2").parent("div:first").attr("id"); //클릭된 a태그의 부모 h2의 부모중 첫번째 div 태그에 id 값을 가져옴
  $("#tab_nav").attr("class","js_on " + tabNum); //tab_nav div의 클래스를 바꿔줌(가져온 id 값으로
 }
 tabH2.find(">a").focus(changetab).click(changetab);//h2의 a 태그에 포커스가 가거나 클릭되면 changetab 함수 호출
});