jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法

jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法

セイト

セイト

その2.「fadeToggle」を使ってタブメニューを実装する

次に、タブメニューを作りたいと思います。
デモはこちら

こいつを実装するのに「.show()」やif文はいりません!
必要な記述は、わずか7行。

JS

<script>
$(function(){
$("#tabMenu li a").on("click", function() {
$("#tabBoxes div").hide();
$($(this).attr("href")).fadeToggle();
});
return false;
});
</script>

HTML

<ul id="tabMenu" class="clearfix">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>
#tabMenu ul{
width:600px;
}
#tabMenu li{
float:left;
}
#tabMenu li a{
display:block;
width:198px;
height:48px;
line-height:50px;
text-align:center;
border:#ccc 1px solid;
}
#tabBox1,#tabBox2,#tabBox3{
width:598px;
height:300px;
border:#ccc 1px solid;
}
#tabBox1{
background:#FCF;
}
#tabBox2{
background:#FFC;
display:none;
}
#tabBox3{
background:#ccc;
display:none;
}

これも「.slideToggle()」同様に「.fadeToggle(“fast”)」などでアニメーションの早さが変えることができます。

~ざっくり補足~
「$(this).attr(“href”)」=「”#tabMenu li a”の”href”の値」=「”tabBox1″,”#tabBox2″,”#tabBox3″のどれか」を意味します。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む