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()})}}); |