통합검색

Javascript

[Jquery] tab

  • 2022.05.10 10:54:23
[!]HTML[/!]
 
<div class="_tabWrap">
    <div class="tab-tab">
        <a href="#">제목1</a>
        <a href="#">제목2</a>
    </div>
    <div class="tab-article">
        <article>내용1</article>
        <article>내용2</article>
    </div>
</div>
 


 
[!]jQuery[/!]
 
$(function(){
    $('._tabWrap').tab();
})

$(function(){
    $('._tabWrap').tab({
      'tabAfter' : function() {
        //실행
      },
      'loadAfter' : function() {
        //실행
      }
    });
})
 
/* jQuery Plugin : tab */
$(function(){$.fn.tab=function(options,callback){return this.each(function(){var $el=$(this);$.fn.tab.defaults={tab:$('.tab-tab'),article:$('.tab-article'),className:'active',mode:'normal',tabAfter:'',loadAfter:''};var option=$.extend({},$.fn.tab.defaults,options);var $tab=$('> *',$el.find(option.tab));var $article=$('> *',$el.find(option.article));function init(){tab_mark_no();article_mark_no();start();loadAfter()}function tab_mark_no(){$tab.each(function(i){$(this).attr('tab',i);if(i==0){$(this).addClass(option.className)}})}function article_mark_no(){$article.each(function(i){$(this).attr('tab',i);if(i>0){$(this).hide()}})}function tabAfter(){if(option.tabAfter){eval(option.tabAfter())}}function loadAfter(){if(option.loadAfter){eval(option.loadAfter())}}function start(){$tab.click(function(e){e.preventDefault();var no=$(this).attr('tab');$(this).addClass(option.className).siblings().removeClass(option.className);$article.each(function(){var hasTab=$(this).attr('tab');if(typeof hasTab!==typeof undefined&&hasTab!==false&&hasTab==no){switch(option.mode){case'fade':$(this).fadeIn();break;default:$(this).show();break}}else{$(this).hide()}});tabAfter()})}init()})}});