【jQuery】タブメニューと別ページから特定のタブを開いた状態で遷移
シンプルなタブメニューと別ページから特定のタブを開いた状態で遷移する記述です。
ブログとかで使えそうな動きです。
タブメニューはいろんなプラグインがあったり、CSSだけでも実装できたり、
いろいろな書き方ありますが。今回はプラグインは使わず、jQueryとCSSで実装してみました。
html
HTMLはこんな感じです。
タブメニューの部分
<ul class="cf" id="tab"> <li class="select"><a href="#tab1">全てみる</a></li> <li><a href="#tab2">動物</a></li> <li><a href="#tab3">風景</a></li> <li><a href="#tab4">インテリア</a></li> </ul>
#tabで全体を囲みます。
最初に表示しておくタブエリアに対応したタブメニューに.selectを付けておきます。
タブエリアの部分
<div class="content_wrap"> <ul id="cate1"> <li><a href="#"><img src="images/IMG1.jpg" height="334" width="500" alt=""><p>カテゴリ1</p></a></li> </ul> </div> <div class="content_wrap disnon"> <ul id="cate2"> <li><a href="#"><img src="images/IMG1.jpg" height="334" width="500" alt=""><p>カテゴリ2</p></a></li> </ul> </div> <div class="content_wrap disnon"> <ul id="cate3"> <li><a href="#"><img src="images/IMG4.jpg" height="334" width="500" alt=""><p>カテゴリ3</p></a></li> </ul> </div> <div class="content_wrap disnon"> <ul id="cate4"> <li><a href="#"><img src="images/IMG3.jpg" height="334" width="500" alt=""><p>カテゴリ4</p></a></li> </ul> </div>
各タブエリアを.content_wrapで囲んでおきます。
クリックされたタブメニューに応じて、.content_wrapに.disnonを付けたり外したりします。
disnonがあるかないかで表示させたり、非表示にしたりします。
CSS
CSSはこれだけです。
選ばれたタブメニューのスタイルと
タブエリアの非表示設定のみ。あとはjQueryでやります。
.select { border-bottom: solid 2px orange; } .disnon { display: none; }
jQuery
以下、jQueryの記述です。
$(function() { // 特定のタブを開いて遷移 $(window).load(function(){ var hash = location.hash; hash = (hash.match(/^#tab\d+$/) || [])[0]; var tabname = hash.slice(4); var tabname = tabname - 1; var tabbar = tabname; $(".content_wrap").addClass('disnon'); $(".content_wrap").eq(tabname).removeClass('disnon'); $("#tab li").removeClass('select'); $("#tab li").eq(tabbar).addClass('select'); }); // タブメニュー $("#tab li").click(function() { var num = $("#tab li").index(this); $(".content_wrap").addClass('disnon'); $(".content_wrap").eq(num).removeClass('disnon'); $("#tab li").removeClass('select'); $(this).addClass('select'); }); });
タブの動きは簡単です。
クリックされたタブメニューの番号をとって、
その番号に応じてタブエリアに.disnonを付けたり外したりして、表示・非表示をさせています。
タブメニューだけ必要なら、タブメニューとコメントアウトしているところの記述だけでOKです。
別ページから特定のタブを開いた状態で遷移するときは、
遷移元のページのリンクを以下のようにします。
<ul style="width: 900px; margin: 0 auto;"> <li><a href="test3.html#tab1">全ての写真を見る</a></li> <li><a href="test3.html#tab2">動物の写真を見る</a></li> <li><a href="test3.html#tab3">風景の写真を見る</a></li> <li><a href="test3.html#tab4">インテリアの写真を見る</a></li> </ul>
ハッシュをつけておきます。
jQueryの記述は、ざっくりいうと、
ページが読み込まれたときに、URLのハッシュを見つけて数字を読み取り、
その数字に応じたタブエリアを開くという感じです。
なんかこの記事書きながら、ここの記述要らないんじゃないかと思いはじめてますが(笑)、
慣れないWordPressで実装していた時のものなので、内容見直して更新します(^^;
とりあえず動かないことはないと思います。