Cara Membuat Tab Fade dengan Jquery

Dalam tutorial ini,saya akan membahas salah satu tutorial Jquery, yaitu membuat tab fade dengan Jquery

LANGKAH-LANGKAH UNTUK MEMBUAT TAB FADE DENGAN JQUERY

Pertama, Download Jquery terbaru atau bisa download disini
Kedua, Membuat file script dibawah ini dengan cara meng-copy lalu klik ctrl S,simpan dengan nama fading-tabs.js

// jQuery Fading Tabs Plugin eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4($){$.2l({z:{2k:0}});$.1P.z=4(x,w){3(O x==\'2Y\')w=x;w=$.2l({K:(x&&O x==\'1Z\'&&x>0)?--x:0,12:C,J:$.1f?2h:T,18:T,1r:\'2XQ;\',21:\'18-2F-\',1m:C,1u:C,1l:C,1F:C,1x:\'2u\',2r:C,2p:C,2m:T,2i:C,1d:C,1c:C,1j:\'z-1M\',H:\'z-2b\',14:\'z-12\',16:\'z-26\',1q:\'z-1H\',1L:\'z-2L\',2j:\'10\'},w||{});$.8.1D=$.8.U&&($.8.1Y&&$.8.1Y<7||/2A 6.0/.2y(2x.2w));4 1w(){1V(0,0)}F 5.Y(4(){2 p=5;2 r=$(\'13.\'+w.1j,p);r=r.V()&&r||$(\'>13:9(0)\',p);2 j=$(\'a\',r);3(w.18){j.Y(4(){2 c=w.21+(++$.z.2k),B=\'#\'+c,2f=5.1O;5.1O=B;$(\'<10 S="\'+c+\'" 34="\'+w.16+\'"></10>\').2c(p);$(5).19(\'1B\',4(e,a){2 b=$(5).I(w.1L),X=$(\'X\',5)[0],27=X.1J;3(w.1r){X.1J=\'<24>\'+w.1r+\'</24>\'}1p(4(){$(B).2T(2f,4(){3(w.1r){X.1J=27}b.17(w.1L);a&&a()})},0)})})}2 n=$(\'10.\'+w.16,p);n=n.V()&&n||$(\'>\'+w.2j,p);r.P(\'.\'+w.1j)||r.I(w.1j);n.Y(4(){2 a=$(5);a.P(\'.\'+w.16)||a.I(w.16)});2 s=$(\'A\',r).20($(\'A.\'+w.H,r)[0]);3(s>=0){w.K=s}3(1e.B){j.Y(4(i){3(5.B==1e.B){w.K=i;3(($.8.U||$.8.2E)&&!w.18){2 a=$(1e.B);2 b=a.15(\'S\');a.15(\'S\',\'\');1p(4(){a.15(\'S\',b)},2D)}1w();F T}})}3($.8.U){1w()}n.1a(\':9(\'+w.K+\')\').1C().1n().2C(\':9(\'+w.K+\')\').I(w.1q);$(\'A\',r).17(w.H).9(w.K).I(w.H);j.9(w.K).N(\'1B\').1n();3(w.2m){2 l=4(d){2 c=$.2B(n.1t(),4(a){2 h,1A=$(a);3(d){3($.8.1D){a.Z.2z(\'1X\');a.Z.G=\'\';a.1k=C}h=1A.L({\'1h-G\':\'\'}).G()}E{h=1A.G()}F h}).2v(4(a,b){F b-a});3($.8.1D){n.Y(4(){5.1k=c[0]+\'1W\';5.Z.2t(\'1X\',\'5.Z.G = 5.1k ? 5.1k : "2s"\')})}E{n.L({\'1h-G\':c[0]+\'1W\'})}};l();2 q=p.1U;2 m=p.1v;2 v=$(\'#z-2q-2o-V\').1t(0)||$(\'<X S="z-2q-2o-V">M</X>\').L({1T:\'2n\',3a:\'39\',38:\'37\'}).2c(Q.1S).1t(0);2 o=v.1v;36(4(){2 b=p.1U;2 a=p.1v;2 c=v.1v;3(a>m||b!=q||c!=o){l((b>q||c<o));q=b;m=a;o=c}},35)}2 u={},11={},1R=w.2r||w.1x,1Q=w.2p||w.1x;3(w.1u||w.1m){3(w.1u){u[\'G\']=\'1C\';11[\'G\']=\'1H\'}3(w.1m){u[\'W\']=\'1C\';11[\'W\']=\'1H\'}}E{3(w.1l){u=w.1l}E{u[\'1h-2g\']=0;1R=1}3(w.1F){11=w.1F}E{11[\'1h-2g\']=0;1Q=1}}2 t=w.2i,1d=w.1d,1c=w.1c;j.19(\'2e\',4(){2 c=$(5).1g(\'A:9(0)\');3(p.1i||c.P(\'.\'+w.H)||c.P(\'.\'+w.14)){F T}2 a=5.B;3($.8.U){$(5).N(\'1b\');3(w.J){$.1f.1N(a);1e.B=a.1z(\'#\',\'\')}}E 3($.8.1y){2 b=$(\'<2d 33="\'+a+\'"><10><32 31="2a" 30="h" /></10></2d>\').1t(0);b.2a();$(5).N(\'1b\');3(w.J){$.1f.1N(a)}}E{3(w.J){1e.B=a.1z(\'#\',\'\')}E{$(5).N(\'1b\')}}});j.19(\'1E\',4(){2 a=$(5).1g(\'A:9(0)\');3($.8.1y){a.1o({W:0},1,4(){a.L({W:\'\'})})}a.I(w.14)});3(w.12&&w.12.1K){29(2 i=0,k=w.12.1K;i<k;i++){j.9(--w.12[i]).N(\'1E\').1n()}};j.19(\'28\',4(){2 a=$(5).1g(\'A:9(0)\');a.17(w.14);3($.8.1y){a.1o({W:1},1,4(){a.L({W:\'\'})})}});j.19(\'1b\',4(e){2 g=e.2Z;2 d=5,A=$(5).1g(\'A:9(0)\'),D=$(5.B),R=n.1a(\':2W\');3(p[\'1i\']||A.P(\'.\'+w.H)||A.P(\'.\'+w.14)||O t==\'4\'&&t(5,D[0],R[0])===T){5.25();F T}p[\'1i\']=2h;3(D.V()){3($.8.U&&w.J){2 c=5.B.1z(\'#\',\'\');D.15(\'S\',\'\');1p(4(){D.15(\'S\',c)},0)}2 f={1T:\'\',2V:\'\',G:\'\'};3(!$.8.U){f[\'W\']=\'\'}4 1I(){3(w.J&&g){$.1f.1N(d.B)}R.1o(11,1Q,4(){$(d).1g(\'A:9(0)\').I(w.H).2U().17(w.H);R.I(w.1q).L(f);3(O 1d==\'4\'){1d(d,D[0],R[0])}3(!(w.1u||w.1m||w.1l)){D.L(\'1T\',\'2n\')}D.1o(u,1R,4(){D.17(w.1q).L(f);3($.8.U){R[0].Z.1a=\'\';D[0].Z.1a=\'\'}3(O 1c==\'4\'){1c(d,D[0],R[0])}p[\'1i\']=C})})}3(!w.18){1I()}E{$(d).N(\'1B\',[1I])}}E{2S(\'2R P 2P 2O 26.\')}2 a=1G.2N||Q.1s&&Q.1s.23||Q.1S.23||0;2 b=1G.2M||Q.1s&&Q.1s.22||Q.1S.22||0;1p(4(){1G.1V(a,b)},0);5.25();F w.J&&!!g});3(w.J){$.1f.2K(4(){j.9(w.K).N(\'1b\').1n()})}})};2 y=[\'2e\',\'1E\',\'28\'];29(2 i=0;i<y.1K;i++){$.1P[y[i]]=(4(d){F 4(c){F 5.Y(4(){2 b=$(\'13.z-1M\',5);b=b.V()&&b||$(\'>13:9(0)\',5);2 a;3(!c||O c==\'1Z\'){a=$(\'A a\',b).9((c&&c>0&&c-1||0))}E 3(O c==\'2J\'){a=$(\'A a[@1O$="#\'+c+\'"]\',b)}a.N(d)})}})(y[i])}$.1P.2I=4(){2 c=[];5.Y(4(){2 a=$(\'13.z-1M\',5);a=a.V()&&a||$(\'>13:9(0)\',5);2 b=$(\'A\',a);c.2H(b.20(b.1a(\'.z-2b\')[0])+1)});F c[0]}})(2G);',62,197,'||var|if|function|this|||browser|eq||||||||||||||||||||||||||tabs|li|hash|null|toShow|else|return|height|selectedClass|addClass|bookmarkable|initial|css||trigger|typeof|is|document|toHide|id|false|msie|size|opacity|span|each|style|div|hideAnim|disabled|ul|disabledClass|attr|containerClass|removeClass|remote|bind|filter|click|onShow|onHide|location|ajaxHistory|parents|min|locked|navClass|minHeight|fxShow|fxFade|end|animate|setTimeout|hideClass|spinner|documentElement|get|fxSlide|offsetHeight|unFocus|fxSpeed|safari|replace|jq|loadRemoteTab|show|msie6|disableTab|fxHide|window|hide|switchTab|innerHTML|length|loadingClass|nav|update|href|fn|hideSpeed|showSpeed|body|display|offsetWidth|scrollTo|px|behaviour|version|number|index|hashPrefix|scrollTop|scrollLeft|em|blur|container|tabTitle|enableTab|for|submit|selected|appendTo|form|triggerTab|url|width|true|onClick|tabStruct|remoteCount|extend|fxAutoHeight|block|font|fxHideSpeed|watch|fxShowSpeed|1px|setExpression|normal|sort|userAgent|navigator|test|removeExpression|MSIE|map|not|500|opera|tab|jQuery|push|activeTab|string|initialize|loading|pageYOffset|pageXOffset|such|no|8230|There|alert|load|siblings|overflow|visible|Loading|object|clientX|value|type|input|action|class|50|setInterval|hidden|visibility|absolute|position'.split('|'),0,{}))

Ketiga, Buat file index/html,simpan dengan nama tab.html

<!DOCTYPE html> <html> <head> <title>201453082</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="fading-tabs.js"></script> <script type="text/javascript"> $(function() {$('#tabwrap').tabs({ fxFade: true, fxSpeed: 'slow' }); }); </script> <style type="text/css"> /* jQuery Fading Tabs: This is all the css that's needed to make it work. The two rules below are generated by the tabs plugin */ .tabs-hide { display:none; /* hide non-active tabs */ } .tabs-container { background:#fff; /* kills fadding in/out IE text bug */ } </style> </head> <body> <h1>Tugas membuat Tab Fade</h1> <div id="tabwrap"> <ul id="tabnav"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <p>Nama : Uzlifatil Jannah Nasa<br>NIM : 201453082<br>Kelas C</p> </div> <div id="tab2"> <p>Alamat : Glantengan Rt-03 Rw-02 Kota Kudus</p> </div> <div id="tab3"> <p>Tutorial ini dibuat berdasarkan tugas mata kuliah Pemrograman Web<br>Semester 4<br>Universitas Muria Kudus<br>Fakultas Teknik Sistem Informasi</p> </div> </div> </body> </html>

Keempat, Hasilnya :

dari TAB 1 :

dari TAB 2 :

dari TAB 3 :