問題
クリックで内容の切り替わるタブを実装するには？
解決策
タブのブロックと内容のブロックをそれぞれマークアップし、タブのクリックイベントで内容を切り替える。
特定のタブを最初から表示させておく方法
タブを使っているページで、特定のタブを最初から選択して表示させておく手法例をご紹介します。
今回は下記ページの応用版となります。
タブの実装方法は以下をご覧ください。
クリックで内容の切り替わるタブの実装方法
DEMOはこちら
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」の値を元に、当てはまるタブをアクティブにします。
参考
【String.prototype.split() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
コメント