jQueryのaddClassとremoveClassを利用して、ページ遷移をしないタブメニューを作ります。
このタブメニューは、ページ遷移をしないので無駄な通信やページを作ることが無いのがの最大の利点です。表示領域が限られているスマホサイトでは特に有効なテクニックです。

スポンサーリンク

まずはソース上にタブ内に表示させる要素を詰め込みます。
そして、タブのメニューを押したときに、押したタブに対応した中身を表示させてあげる。

やっていることはこれだけなので、切り替えだけに関して言えば難しいことは特にしていません。

jQuery

$(".tab_select li").click(function() {
	var num = $(".tab_select li").index(this);
	$(".tab_contents").addClass('tab_hidden');
	$(".tab_contents").eq(num).removeClass('tab_hidden');
	$(".tab_select li").removeClass('current');
	$(this).addClass('current');
});

[1行目].tab_select liをクリックしたらアクション開始
[2行目]var numを使い、クリックした要素のindex(番号)を格納
[3行目]全ての.tab_contentsに対して、addClassでクラスの追加
[4行目]eq(num)を使い、2行目と同じ番号の.tab_contentsに対して、removeClassでクラスの撤去
[5行目]全ての.tab_select liに対して、removeClassでクラスの撤去
[6行目]thisに対して、addClassでクラスの追加

var numとeq(num)、thisを使っているので、仮にタブがいくつになろうともjQueryの部分を修正することはありません。

サンプルページを表示

あとはタブ周りをどのようにデザインするか。ですね。
今回は単純にタブの切り替えだけを行うだけでは味気ないので、選択中のタブには「選択中」とわかるように大きさと色の変更、そして下線の追加をしました。

html

<div>
    <ul class="tab_select">
        <li class="current">タブ1</li><li>タブ2</li><li>タブ3</li>
    </ul>
    
    <div class="tab_body">
        <section class="tab_contents">
        <h1>タブ1を表示中</h1>
        <div>
            <p>現在の表示タブはタブ1です</p>
            <p>divで表示エリアを囲っています</p>
        </div>
        </section>
        
        <section class="tab_contents tab_hidden">
        <h1>タブ2を表示中</h1>
        <div>
            <p>現在の表示タブはタブ2です</p>
            <p>divで表示エリアを囲っています</p>
            <p>divで表示エリアを囲っていますが、ulで囲っても問題ないです</p>
        </div>
        </section>
    
        <section class="tab_contents tab_hidden">
        <h1>タブ3を表示中</h1>
        <div>
            <p>現在の表示タブはタブ3です</p>
            <p>divで表示エリアを囲っています</p>
            <p>divで表示エリアを囲っていますが、dlで囲っても全く問題ないです</p>
        </div>
        </section>
    </div>
</div>
css

/*タブのセレクト部分のCSS*/
.tab_select {
	background-color: #FAEFDD;
	text-align: center;
}

.tab_select li {
	border-right: solid 1px #F2F2F2;
	width: 220px;
	height: 42px;
	line-height: 45px;
	display: inline-block;
	color: #DF951A;
	font-weight: bold;
	position: relative;
	cursor: pointer;
}

.tab_select li:last-child {
	border-right: none;
}

.tab_select li.current {
	background-color: #ECBF76;
	border-radius: 4px 4px 0 0;
	height: 50px;
	line-height: 55px;
	margin-top: -5px;
	color: #FFF;
	cursor: auto;
}

.tab_select li.current:after {
	content: "";
	position: absolute;
	bottom: 0;
	background-color: #DF951A;
	display: block;
	width: 100%;
	height: 5px;
}

/*タブのコンテンツ部分のCSS*/
.tab_body section h1 {
	background-color: #ECBF76;
	margin: 8px 0;
	padding: 6px 0;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}

.tab_body section div {
	border: solid 1px #ECBF76;
	padding: 10px;
}

.tab_body .tab_hidden {
	display: none;
}

前述しましたが、このページ遷移をしないタブメニューの切り替えは、はじめに全てのソースを読み込んで、その後、選択中のタブ内の要素以外は display:none(サンプルページでは.tab_hidden) で非表示にしています。

そのため、タブ内に要素を詰め込みすぎると、ページ全体の表示速度の遅延に繋がるので、その点にはご注意を。

PAGE TOP