ベーシックなアニメーションエフェクト付きのタブ
Result
jQuery
var p = $("article"),
t = $("#tabs li a");
p.hide();
t.click(function(e) {
e.preventDefault();
p.hide();
ph = $(this.hash).outerHeight();
$(this.hash).show().parent().animate({
"height": ph
});
t.removeClass("selected");
$(this).addClass("selected");
}).filter(':first').click();
html
<ul id="tabs">
<li><a href="#panel1">Panel 1</a></li>
<li><a href="#panel2">Panel 2</a></li>
<li><a href="#panel3">Panel 3</a></li>
</ul>
<section id="panelwrap">
<article id="panel1">
<h1>This is panel 1</h1>
<p>panel 1 panel 1 panel 1 panel 1 panel 1 </p>
</article>
<article id="panel2">
<h1>This is panel 2</h1>
<p>panel 2 </p>
</article>
<article id="panel3">
<h1>This is panel 3</h1>
<p>panel 3 panel 3 panel 3 panel 3 panel 3 </p>
</article>
</section>
via
Super_simple_jQuery_tabs