탭메뉴 tabmenu

HTML

     <div id="tabBoard">          
            <h3 class="tabBoard1"><a href=""><img src="../0801/img/tab_1_over.gif" alt="새소식" /></a></h3>
             <ul class="tabBoard1">
                <li><a href="">국립민속박물관 대체인력 채용 서류전형 합격자</a></li>
                <li><a href="">국립민속박물관 모바일 웹서비스 개편 오픈</a></li>
                <li><a href="">7월 23일은 '대서','중복' 입니다.</a></li>
                <li><a href="">7월 22일은 '유두'입니다.</a></li>
                <li><a href="">‘경남민속문화의 해’ 전시물품 양여 기관 선정 결과</a></li>
                <li><a href="">민속생활사박물관 협력망 사업운영기관 선정 결과</a></li>
             </ul>
             <p class="tabBoard1"><a href="" title="새소식 더보기"><img src="img/btn_more.gif" alt="더보기" /></a></p>
            
            <h3 class="tabBoard2"><a href=""><img src="../0801/img/tab_2_out.gif" alt="일반교육" /></a></h3>
             <ul class="tabBoard2">
                <li><a href="">[전문가]2013년도 초등교원 우리민속연수</a></li>
                <li><a href="">[청소년]청소년 자문단 모집</a></li>
                <li><a href="">[전문가]2013년 대학생 예비큐레이터 과정</a></li>
                <li><a href="">[전문가]제25기『박물관 전문 인력 양성 교육』교육생 모집</a></li>
                <li><a href="">[문화소외층]「오감만족 박물관 나들이」 안내</a></li>
                <li><a href="">[문화소외층]점자도 문자도</a></li>
             </ul>
             <p class="tabBoard2"><a href="" title="일반교육 더보기"><img src="img/btn_more.gif" alt="더보기" /></a></p>
             
            <h3 class="tabBoard3"><a href=""><img src="../0801/img/tab_3_out.gif" alt="어린이교육" /></a></h3>
              <ul class="tabBoard3">
                <li><a href="">1박2일 마을여행-아빠와 함께!</a></li>
                <li><a href="">2013년 7월 야호! 문화공감 ‘훨훨 간다’</a></li>
                <li><a href="">8월 우리가족 박물관 나들이</a></li>
                <li><a href="">「세시풍속과 절기음식」- 7월</a></li>
                <li><a href="">2013년 여름방학 교육 프로그램</a></li>
                <li><a href="">7월 [신나는 토요일]</a></li>
             </ul>
             <p class="tabBoard3"><a href="" title="어린이교육 더보기"><img src="img/btn_more.gif" alt="더보기" /></a></p>
             
            <h3 class="tabBoard4"><a href=""><img src="../0801/img/tab_4_out.gif" alt="보도정보" /></a></h3>
              <ul class="tabBoard4">
                <li><a href="">경남마을민속조사보고서 발간</a></li>
                <li><a href="">경남 거제 도시민속조사보고서 발간</a></li>
                <li><a href="">야호(夜好) 문화공감(7월)-네 번째 이야기 ‘훨훨 ...</a></li>
                <li><a href="">국립민속박물관 모바일 웹서비스 개편</a></li>
                <li><a href="">'쉼' 특별전 개최</a></li>
                <li><a href="">유두 세시연계교육 운영</a></li>
            </ul>
            <p class="tabBoard4"><a href="" title="보도정보 더보기"><img src="img/btn_more.gif" alt="더보기" /></a></p>           
     </div>

CSS

#tabBoard {clear:both;position:relative;left:240px;top:-100px;width:300px;border-left:1px solid #ddd ;padding-left:20px;}

#tabBoard h3 a{}
#tabBoard h3.tabBoard1 {position:absolute;top:0;left:20px;width:51px;}
#tabBoard h3.tabBoard2 {position:absolute;top:0;left:70px;width:63px;}
#tabBoard h3.tabBoard3 {position:absolute;top:0;left:132px;width:76px;}
#tabBoard h3.tabBoard4 {position:absolute;top:0;left:207px;width:63px;}

#tabBoard ul.tabBoard2, ul.tabBoard3, ul.tabBoard4 {display:none;}
#tabBoard p.tabBoard2, p.tabBoard3, p.tabBoard4 {display:none}

#tabBoard p {position:absolute;top:8px;right:6px;}
#tabBoard p.news {z-index:2;}
#tabBoard li{line-height:20px;padding-left:5px;background:url('img/icon_bullet.gif') no-repeat 0 40%;}

JQEURY

$(document).ready(function(){

    //제목 아래에 있는 링크 클릭시 해당 ul, p보이게
    $("#tabBoard h3 a").click(function(){       
        
        $(this).parent().siblings("ul").hide(); //해당 ul을 제외한 모든 ul의 형제들은 숨기기
        $(this).parent().next().show();
        $(this).parent().next().next().show();

        $(this).parent().siblings("h3").find("img").attr("src",function(){
            var $src = $(this).attr("src");
            return $src.replace("_over.gif","_out.gif");
        });

        $(this).find("img").attr("src",function(){
            var $src = $(this).attr("src");
            return $src.replace("_out.gif","_over.gif");
        });

        return false;
        
    });
    
});