問題 × 解決策

特定のタブを最初から表示させておく

問題

クリックで内容の切り替わるタブを実装するには?

解決策

タブのブロックと内容のブロックをそれぞれマークアップし、タブのクリックイベントで内容を切り替える。

特定のタブを最初から表示させておく方法

タブを使っているページで、特定のタブを最初から選択して表示させておく手法例をご紹介します。

今回は下記ページの応用版となります。
タブの実装方法は以下をご覧ください。
クリックで内容の切り替わるタブの実装方法

DEMOはこちら

  • タブA

    タブAの内容のブロックです。

  • タブB

    タブBの内容のブロックです。

  • タブC

    タブCの内容のブロックです。

  • タブD

    タブDの内容のブロックです。

  • タブE

    タブEの内容のブロックです。

jQueryの構築

jQueryのコード例です。

if(location.search){
	var url = location.href;
	// GETの頭の「?」を基準に、文字列を分割して配列化
	parameters = url.split("?");
	// 「?」以降の値[1]をさらに、各GETごとを分割して配列化
	params   = parameters[1].split("&");
	var paramsArray = [];
	for ( i = 0; i < params.length; i++ ) {
		// GETのキーと値を分割して配列化
		neet = params[i].split("=");
		// GETのキーを配列に格納
		paramsArray.push(neet[0]);
		// GETのキーと連動させて値を格納
		paramsArray[neet[0]] = neet[1];
	}
	// 特定のキーを変数に代入
	var categoryKey = paramsArray["tab"];
	// 特定のキーをいずれかのタブのliタグがクラス(class)として保持しているならば
	if($('.tab-list li.' + categoryKey).length){
		var active = $('.tab-list li.' + categoryKey + " a");
		// 内容ブロック内のliタグを一旦、全て非表示にします。
		$(".tab-content > li").css("display","none");
		// タブブロック内の全てのliタグから、クラス「on」を外します。
		$(".tab-list > li").removeClass("on"); 
		// クリックしたボタンのliタグのクラスを変数に格納
		var btn = active.parent("li").attr("class");
		// 内容ブロックの中で、クリックしたボタンのliタグと同じクラスを持つliタグを表示させます。
		$(".tab-content > li." + btn ).css("visible","hidden").fadeIn(1000);
		// クリックしたボタンのliタグにクラス「on」を付与します。
		active.parent("li").addClass("on");
	}
}
  • 最初にページを読み込んだ時、URLのGETを取得します。
  • 「split」で文字列を分割していき、GETのキー「tab」の値を元に、当てはまるタブをアクティブにします。

参考

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eighteen − eleven =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧