ベーシックなアニメーションエフェクト付きのタブ

Ads

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

タイトルとURLをコピーしました