[script] 탭메뉴

jQuery(function($){
	$('.tabcontent > div').hide();
	$('.tabnav a').click(function () {
		$('.tabcontent > div').hide().filter(this.hash).fadeIn();
		$('.tabnav a').removeClass('active');
		$(this).addClass('active');
		return false;
	}).filter(':eq(0)').click();
  });

<div class="tab">
  <ul class="tabnav">
    <li><a href="#tab01">탭메뉴1</a></li>
    <li><a href="#tab02">탭메뉴2</a></li>
  </ul>
  <div class="tabcontent">
    <div id="tab01">
      <dl class="tab_top">
        <dt><a href="#">탭메뉴 스크립트 tab01</a></dt>
        <dd><a href="#">탭메뉴 스크립트 tab01</a></dd>
        <dd><a href="#">[2010-04-29]</a></dd>
      </dl>
      <ul class="tab_under">
        <li><a href="#"><span>[2010-03-20]</span>한국 근현대사</a></li>
        <li><a href="#"><span>[2010-11-12]</span>세계사 - 동양편</a></li>
        <li><a href="#"><span>[2010-04-21]</span>세계사 - 서양편</a></li>
      </ul>
    </div>
    <div id="tab02">
      <dl class="tab_top">
        <dt><a href="#">탭메뉴 스크립트 tab0</a></dt>
        <dd><a href="#">탭메뉴 스크립트 tab02</a></dd>
        <dd><a href="#">[2010-09-07]</a></dd>
      </dl>
      <ul class="tab_under">
        <li><a href="#"><span>[2010-08-17]</span>서양 음악사</a></li>
        <li><a href="#"><span>[2010-07-04]</span>서양 미술사</a></li>
        <li><a href="#"><span>[2010-06-25]</span>한국사</a></li>
      </ul>
    </div>
  </div>
</div><!--tab-->

.tab{float:left; width:600px; height:290px;}
.tabnav{font-size:0; width:600px; border:1px solid #ddd;}
.tabnav li{display: inline-block;  height:46px; text-align:center; border-right:1px solid #ddd;}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#7ea21e;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:46px; text-decoration:none; font-size:16px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }

.tabcontent{padding: 20px; height:244px; border:1px solid #ddd; border-top:none;}
.tabcontent dl{border-bottom:1px solid #ddd;}
.tab_top dt a{color:#333; font-size:15px; }
.tab_top dd{margin-top:6px;}
.tab_top dd a{ color:#666; font-size:14px;}
.tab_top dd:last-child{padding-bottom:15px;}
.tab_under{padding-top:15px;}
.tab_under li{position:relative; padding-left:20px;}
.tab_under li:before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; background:#ddd;}
.tab_under li span{float:right;}
.tab_under li a{color:#666; font-size:14px;}

tabnav > a에 링크되는 id 값을 tabcontent 와 연결되게 동일한 id값을 설정해 주는것이 중요하다.

스크립트는 수정할것 없이 head가 끝나기 전 script안에 입력해주면 끝!

 

 

 

탭메뉴 동작확인!

0