<div id="tab_design">
  <a class="sound_only" href="#contents">탭 메뉴 건너뛰기</a>
  <nav class="tab_menu clearfix">
   <ul>
    <li>
     <a href="#clock">
      S장터
     </a>
    </li>
    <li>
     <a href="#weather">
      Q&A
     </a>
    </li>
    <li>
     <a href="#calender">
      S파티모집
     </a>
    </li>
    <li>
     <a href="#chart">
      S길드홍보
     </a>
    </li>
   </ul>
  </nav><!-- e: .tab_menu -->
  <div class="tab_contents">
   <ul>
    <li id="clock">
     <div>
     <?php echo latest("06", "table_08", 7, 25);?>
     </div>
    </li>
    <li id="weather">
     <div>
     <?php echo latest("06", "table_08", 7, 25);?>
     </div>
    </li>
    <li id="calender">
     <div>
     <?php echo latest("06", "table_08", 7, 25);?>
     </div> 
    </li>
    <li id="chart">
     <div>
     <?php echo latest("06", "table_08", 7, 25);?>
     </div>
    </li>
   </ul>
  </div><!-- e: .tab_contents -->
 </div><!-- e: #tab_design --> ​

;(function($) { 
 $.fn.tabs = function(options) {
  
  // 옵션 설정.
  options = $.extend({
   start_index: 1,
   random: false,
   transitions_time: 400
  }, options);
  
  // jQuery 체인.
  return this.each(function() {
   
   // 대상 참조.
   var $this = $(this),
    $menu = $this.find('.tab_menu'),
    $menu_li = $menu.find('li'),
    $menu_a = $menu_li.find('a'),
    $contents = $this.find('.tab_contents'),
    support_features = !Modernizr.opacity || !Modernizr.csstransitions;
    
   // 랜덤 인덱스 설정. 
   if(options.random) 
    options.start_index = Math.floor(Math.random() * $menu_li.length + 1);
   
   // 플러그인 대상 객체에 클래스 부여 
   $this.addClass('tabs');
   
   // 처음 보여질 탭 설정.
   $menu.add($contents)
    .find('li:nth-child(' + options.start_index + ')').addClass('active');
   
   // opacity 미지원 브라우저에 적용.
   if(support_features) {
    
    $menu_li.find('img').animate({'opacity': 0}, 10, function() {
     $menu_li.filter('.active').find('img').animate({'opacity': 1}, 10); 
    });
    
    $menu_a
     .mouseover(function() {
      $(this)
       .stop().animate({'padding-left': '2.2em', 'padding-right': '0.8em'}, 200)
       .find('img').stop().animate({'opacity': 1, 'left': 6}, 200);
     })
     .mouseout(function() {
      if($(this).parent().hasClass('active')) return false;
      $(this)
       .stop().animate({'padding-left': '1.5em', 'padding-right': '1.5em'}, 200)
       .find('img').stop().animate({'opacity':0, 'left': 16}, 200);
     });
   };
    
   // $menu 내부의 a 클릭 시 이벤트 핸들링
   $menu_a.click(function(e) {
   
    // 대상 참조.
    var $this = $(this),
     target = $this.attr('href');
     
    // 활성화된 a 클릭 시, 작동하지 않도록 설정.
     if($this.parent().hasClass('active')) return;
     
     // $menu_link에서 active 클래스 제거
    $menu_li.removeClass('active');
    
    // 클릭한 a의 부모 li에 active 클래스 추가
    $this.parent().addClass('active');
    
    // opacity 미지원 브라우저에 적용. 
    if(support_features) {
     $menu_li.not('.active').find('a').mouseout();
     $(this).mouseover();
    };
    
    // 부드러운 장면전환.
    $contents.find('li')
     .fadeTo(options.transition_time, 0, function() {
      $(this).removeClass('active')
       .filter(target).addClass('active').fadeTo(options.transition_time, 1);
    });
   
    // 브라우저 링크 기본 동작 차단
    e.preventDefault();
    
   });
   
  }); // end: return
 }; //end: plug-in
})(jQuery);​