Skip to content

Instantly share code, notes, and snippets.

@foo9
Created March 22, 2013 15:51
Show Gist options
  • Save foo9/5222359 to your computer and use it in GitHub Desktop.
Save foo9/5222359 to your computer and use it in GitHub Desktop.
minimum tab jquery plugin (577 bytes)
;(function(a){a.fn.simpletab=function(){return this.each(function(){for(var b,c,d,e,f=a(this).find("a"),g=0,h=f.length;h>g;g++)c=a(f[g]),d=c.attr("href"),d=a(d),d.hide().bind("stactive stinactive",function(b,c){e=a(this),c=="#"+e.attr("id")&&("stactive"==b.type?e.show():e.hide())}),c.hasClass("active")&&d.show();f.click(function(){if(e=a(this),!e.hasClass("active")){a.event.trigger("stactive",[e.attr("href")]);for(var d=0,g=f.length;g>d;d++)b=f[d],c=a(b),b!=this?(c.removeClass("active"),a.event.trigger("stinactive",[c.attr("href")])):c.addClass("active")}})})}})(jQuery);
@foo9
Copy link
Author

foo9 commented Mar 22, 2013

html:

<ul class="demo-tab">
    <li><a class="active" href="#hoge">hoge</a></li>
    <li><a href="#fuga">fuga</a></li>
    <li><a href="#piyo">piyo</a></li>
</ul>

<div id="hoge">hoge hoge</div>
<div id="fuga">fuga fuga</div>
<div id="piyo">piyo piyo</div>

javascript:

$(function() {
    $('.demo-tab').simpletab();
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment