タブの切り替えカスタマイズについて2
-
以前、こちらのカテゴリーにて、タイトルの質問をさせていただいた者です。
//ダイレクトリンク $(function() { //location.hashで#以下を取得 変数hashに格納 var hash = location.hash; //hashの中に#tab~が存在するか調べる。 hash = (hash.match(/^#tab\d+$/) || [])[0]; //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) if($(hash).length){ var tabname = hash.slice(1) ; } else{ // 要素が存在しなければtabnameにtab1を代入する var tabname = "tab1";} //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') $('a').on('click', function() { var tabname = ($(this).attr('href').match(/#(tab\d+$)/) || [])[1]; if (!tabname) { return; } //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') }) }); $(function() { //クリックしたときのファンクションをまとめて指定 $('ul.tab_area li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 // indexという変数に代入します。 var index = $('ul.tab_area li').index(this); //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(index).fadeIn(); //タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); });
こちらのコードで別ページ&同ページからの#tab数字 クリックで指定のタブを開く事が出来たのですが、その際、選択された#tab数字のクラスには当然selectクラスが付与されるのですが、
これを、単純にページへアクセスした時にはどのタブにも付与させないようにするには、どう追記すればよろしいでしょうか?http://◯◯◯.com/test.htm#tab1 では当然tab1にselectクラスが付与されますが、
http://◯◯◯.com/test.htm にアクセスした場合はどのタブにもクラスを付与しないという事です。よろしくお願いいたします。
3件の返信を表示中 - 1 - 3件目 (全3件中)
3件の返信を表示中 - 1 - 3件目 (全3件中)
- トピック「タブの切り替えカスタマイズについて2」には新たに返信することはできません。