ベーシックなアニメーションエフェクト付きのタブ by kachibito.net
#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;
}
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();
<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>