jQueryを使ってタブ切り替えメニューを実装する方法

jQueryを使ってタブ切り替えメニューを実装する方法

jQueryを使ってタブ切り替えメニューを実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

jQueryでタブ切り替え型のメニューを作成する方法を紹介いたします。

簡単なデモページを作成しましたので、動きについては以下をご参照ください。

デモページを見る

タブの中には、画像やリンク、テーブルなどを入れることが可能です。

スポンサードリンク

ステップ1. HTMLのマークアップ

まずはタブメニューと中身をマークアップしていきます。HTMLは以下のように記述しましょう。

HTML
<div id="tabs">
<ul>
<li><a href="#panel1">タブ1</a></li>
<li><a href="#panel2">タブ2</a></li>
<li><a href="#panel3">タブ3</a></li>
<li><a href="#panel4">タブ4</a></li>
<li><a href="#panel5">タブ5</a></li>
</ul>
<div id="panel1" class="panel">
タブ1の内容
</div>
<div id="panel2" class="panel">
タブ2の内容
</div>
<div id="panel3" class="panel">
タブ3の内容
</div>
<div id="panel4" class="panel">
タブ4の内容
</div>
<div id="panel5" class="panel">
タブ5の内容
</div>
</div>

タブメニュー全体を#tabsで包括し、各タブの内容に.panelを付与します。

また、タブの中身には、タブメニューに対応するIDを付与します。上記の場合、タブ1は#panel1、タブ2は#panel2というようにしているので、タブ1をクリックすると#panel1の内容が表示されます。

ステップ2. jQueryの実装

続いて、jQueryを実装します。記述する箇所は</body>の直前で大丈夫です。

jQuery
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#tabs a[href^="#panel"]').click(function(){
$("#tabs .panel").hide();
$(this.hash).fadeIn();
return false;
});
$('#tabs a[href^="#panel"]:eq(0)').trigger('click');
})
</script>

まず最初にjQueryをロードしています。ファイルをダウンロードして、サーバー上に設置してもOKです。

$(“#tabs .panel”).hide();で、表示しているタブの中身以外は非表示にしています。

ステップ3. CSSの調整

最後にCSSで見た目を整えて完成です。

CSS
#tabs{overflow:hidden; margin: 15px auto 0; width: 730px;}
#tabs ul{overflow:hidden; list-style:none; border-bottom:1px solid #eee; margin: 0;}
#tabs li{background:#ddd; padding:8px 43px; float:left; margin-right:5px; cursor:pointer;}
#tabs li a{color: #373737; font-weight: bold; text-decoration: none;}
#tabs .panel{background:#EFEFEF; padding:10px; display:none; overflow: hidden;}

デモページでは、上記のようにしています。お好みで変更しましょう。

あとがき

結構簡単に実装できますね。タブで切り替えるメニューを導入する際は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。