hanuman6
7/6/2013 - 12:31 PM

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

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

tab.scss
content_copyfile_download
#panelwrap {
  width: 600px;
  border: 5px solid #333;
  clear: both;
  background: #eee;
  overflow: hidden;
}

#tabs {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    float: left;
    margin-right: 5px;
    a {
      display: block;
      padding: 15px;
      background: #888;
      color: #fff;
      text-decoration: none;
      &:hover {
        background: #333 !important;
      }
    }
  }
}

.selected {
  background: #333 !important;
}

article {
  padding: 20px;
  h1 {
    font-size: 30px;
    margin: 0 0 10px 0;
  }
}

p {
  margin: 10px 0;
}
tab.js
content_copyfile_download
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();
tab.html
content_copyfile_download
<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 panel 1 panel 1 panel 1 
        </p>
    </article>
    
    <article id="panel2">
        <h1>This is panel 2</h1>
        
        <p>
          panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
        </p>
        
        <p>
          panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 panel 2 
            panel 2 panel 2 panel 2 panel 2 panel 2 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>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
        <p>
          panel 3 panel 3 panel 3 panel 3 panel 3 
        </p>
    </article>
</section>