その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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
