Tabs

기본형과 fade Effect가 들어간 모습을 볼 수 있습니다.
플러그인은 텝의 갯수를 얼마든지 확장이 가능한 구조이며, 아래 HTML의 기본구조는 유지 하여야 합니다. 자바스크립트와 CSS가 없이 HTML만 존재하더라도 해당하는 텝 내용으로 이동할수 있도록 앵커 테그에 텝컨텐츠 id를 bookmark로 설정하여 접근성을 유지될 수 있도록 하였습니다.

타입1 (class="tabs")
1번 컨텐츠 '살 안 찌는 체질' 원한다면 이렇게 해봐요~
2번 컨텐츠 껐다 켜면 되겠지… 심각한 청소년 증후군
3번 컨텐츠 태어나자마자 '1억'을 주는 나라가 있다?
4번 컨텐츠 노안의 상징 '팔자 주름', 예방법 없을까?
5번 컨텐츠 이기광이 춘 춤 대체 뭐지? 클럽에서 인기라고?


타입2 (class="pills")
1번 컨텐츠 '살 안 찌는 체질' 원한다면 이렇게 해봐요~
2번 컨텐츠 껐다 켜면 되겠지… 심각한 청소년 증후군
3번 컨텐츠 태어나자마자 '1억'을 주는 나라가 있다?
4번 컨텐츠 노안의 상징 '팔자 주름', 예방법 없을까?
5번 컨텐츠 이기광이 춘 춤 대체 뭐지? 클럽에서 인기라고?
Options
Name type default description
speed string null 기본형은 show(), hide() 입니다.
speed를 지정하게되면 fade효과가 추가됩니다.
(단위 1000 / 1초 또는 "fast" | "slow")
HTML
    
    
    

      
1번 컨텐츠 '살 안 찌는 체질' 원한다면 이렇게 해봐요~

      
2번 컨텐츠 껐다 켜면 되겠지… 심각한 청소년 증후군

      
3번 컨텐츠 태어나자마자 '1억'을 주는 나라가 있다?

      
4번 컨텐츠 노안의 상징 '팔자 주름', 예방법 없을까?

      
5번 컨텐츠 이기광이 춘 춤 대체 뭐지? 클럽에서 인기라고?
CSS
.tabs,
.pills { margin: 0; padding: 0; list-style: none; zoom: 1; }
.tabs:before,
.pills:before,
.tabs:after,
.pills:after { display: table; content: ""; zoom: 1; }
.tabs:after,
.pills:after { clear: both }
.tabs > li,
.pills > li { float: left }
.tabs > li > a,
.pills > li > a { display: block }
.tabs { border-color: #ddd; border-style: solid; border-width: 0 0 1px; }
.tabs > li { position: relative; margin-bottom: -1px; }
.tabs > li > a { 
  padding: 0 15px; margin-right: 2px; line-height: 34px; border: 1px solid transparent; 
  -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; 
}
.tabs > li > a:hover { text-decoration: none; background-color: #eee; border-color: #eee #eee #ddd; }
.tabs .active > a,
.tabs .active > a:hover { color: #808080; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; }
.pills a { 
  margin: 5px 3px 5px 0; padding: 0 15px; line-height: 30px; text-shadow: 0 1px 1px #ffffff; 
  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; 
}
.pills a:hover { color: #ffffff; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); background-color: #00438a; }
.pills .active a { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); background-color: #0069d6; }
.tab-content { padding: 10px; border-bottom: solid 1px #ddd; }
.tab-content div { display: none }
.tab-content .active { display: block }
Javascript
/** =======================================================
 * RFC Tab Plugin
 * 
 * @Author Park Jeong Shik (dodortus@gmail.com)
 * @Copyright © 2012 RSUPPORT. CO, LTD. All rights Reserved.
 * 
 * @Required jQuery
 * ======================================================== */

;(function($){
  $.fn.tab = function(options) {
    console.log('tab', arguments);
    var opts = $.extend({}, $.fn.tab.defaults, options);

    return this.each(function() {
      var $tabWrap = $(this)                    // 현재 tab
        , $tabButton = $tabWrap.find('li')      // 현재 tab 버튼 전체
        , $tabContent = $(this).next();         // 현재 tab 다음 tabContent
      
      $tabButton.click(function() {             // tabButton 클릭시
        $tabButton.removeClass('active');       
        $(this).addClass('active');
        
        if (opts.speed) {
          $tabContent.children().hide()                 // 클릭된 tab index를 이용해 동일한 순서의 컨텐츠 노출
            .eq($(this).index()).fadeTo(opts.speed, 1);  
        } else {
          $tabContent.children().removeClass('active')  
            .eq($(this).index()).addClass('active');  
        }
        return false;
      });
    });
  }
  
  $.fn.tab.defaults = {};
  
  $('#preview-tab').tab(); // Use Plugin 
  $('#preview-pill').tab({
    speed: "slow"
  }); 	  
})(jQuery);

플러그인 사용법 : $('DOM').tab();

History