シンプルなタブメニューと別ページから特定のタブを開いた状態で遷移する記述です。

デモサイト

ブログとかで使えそうな動きです。

タブメニューはいろんなプラグインがあったり、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で実装していた時のものなので、内容見直して更新します(^^;

とりあえず動かないことはないと思います。

記事一覧へ

Tweet
このエントリーをはてなブックマークに追加
Pocket