【jQery】リンクによってタブ切り替えのタブを指定

jQeryを使ってタブ切り替えはよく行うと思います。カテゴリーへのリンク先の場合そのタブが開いてくれていると親切ですよね。
そこで今回idによって何番目のタブが開くの設定を行います。

参考サイト：MEGE’s Factory

まずはHTMLの設定から行っていきます。

項目は変更してください。

サンプル

• 1番目を表示
• 2番目を表示
• 3番目を表示
• 4番目を表示
• 5番目を表示

• 1番目の中身
• 2番目の中身
• 3番目の中身
• 4番目の中身
• 5番目の中身

次にはjavascriptの設定を行います。

ID名は指定した内容によって変えてください。
もちろんjQeryの読み込みはお願いします。

サンプル

$(function(){
$('#tab_list li').click(function() {
var index = $('#tab_list li').index(this);
$('#tab_content li').hide();
$('#tab_content li').eq(index).fadeIn();
$('#tab_list li').removeClass('active');
$(this).addClass('active');
});
});
$(function(){

var hash = location.hash;
if(hash.length){
if(hash.match(/#tab/)){
$('#tab_content li').hide();
$('#tab_list li').removeClass('active');
var tabname = hash.slice(4.1);
tabname = tabname - 1;
$('#tab_content li').eq(tabname).fadeIn();
$('#tab_list li').eq(tabname).addClass('active');
}else{
$('#tab_list li').eq(0).addClass('active');
$('#tab_content li').hide();
$('#tab_content li').eq(0).fadeIn();
}
}else{
$('#tab_list li').eq(0).addClass('active');
$('#tab_content li').hide();
$('#tab_content li').eq(0).fadeIn();
}
});

サンプル

形はスタイルシートで調整してくださいね

1番目を表示

2番目を表示

3番目を表示

4番目を表示

5番目を表示