WORDPRESS内の固定ページにて、タブで同ページ内で別のコンテンツを表示させておりまして、
2つ目のタブクリックのコンテンツでdisplay postプラグインにて記事タイトルの一覧表示をさせて、20件でページネーション、次の20件へいくようにしてあります。
ページネーションで次の20件へいくと、1つ目のタブに切り替わってしまい、2つ目のタブコンテンツ内はたしかに次の20件へ遷移はしています。
これをタブはそのまま2つ目を表示させたまま、ページネーションかけるには、どのようにすればいいのでしょうか?
タブ切り替えは、jQueryで以下のもので行っているのですが。
ご教示いただけますと助かります。
また、そこから記事単体へ飛んで、戻るボタンで元のページへ戻った時も、当然ながら、1つ目のタブにselectクラスが付与されてしまうので。
jQuery
1//ダイレクトリンク 2jQuery(function() { 3 //location.hashで#以下を取得 変数hashに格納 4 var hash = location.hash; 5 //hashの中に#tab~が存在するか調べる。 6 hash = (hash.match(/^#tab\d+$/) || [])[0]; 7 8 //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) 9 if(jQuery(hash).length){ 10 var tabname = hash.slice(1) ; 11 } else{ 12 // 要素が存在しなければtabnameにtab1を代入する 13 var tabname = "tab1";} 14 //コンテンツを一度すべて非表示にし、 15 jQuery('.content_area').css('display','none'); 16 17 //一度タブについているクラスselectを消し、 18 jQuery('.tab_area li').removeClass('select'); 19 20 var tabno = jQuery('ul.tab_area li#' + tabname).index(); 21 22 //クリックされたタブと同じ順番のコンテンツを表示します。 23 jQuery('.content_area').eq(tabno).fadeIn(); 24 25 //クリックされたタブのみにクラスselectをつけます。 26 jQuery('ul.tab_area li').eq(tabno).addClass('select') 27 28 jQuery('a').on('click', function() { 29 var tabname = (jQuery(this).attr('href').match(/#(tab\d+$)/) || [])[1]; 30 if (!tabname) { 31 return; 32 } 33 34 //コンテンツを一度すべて非表示にし、 35 jQuery('.content_area').css('display','none'); 36 37 //一度タブについているクラスselectを消し、 38 jQuery('.tab_area li').removeClass('select'); 39 40 var tabno = jQuery('ul.tab_area li#' + tabname).index(); 41 42 //クリックされたタブと同じ順番のコンテンツを表示します。 43 jQuery('.content_area').eq(tabno).fadeIn(); 44 45 //クリックされたタブのみにクラスselectをつけます。 46 jQuery('ul.tab_area li').eq(tabno).addClass('select') 47}) 48 49 }); 50 51jQuery(function() { 52 //クリックしたときのファンクションをまとめて指定 53 jQuery('ul.tab_area li').click(function() { 54 //.index()を使いクリックされたタブが何番目かを調べ、 55// indexという変数に代入します。 56 var index = jQuery('ul.tab_area li').index(this); 57 58 //コンテンツを一度すべて非表示にし、 59 jQuery('.content_area').css('display','none'); 60 61 //クリックされたタブと同じ順番のコンテンツを表示します。 62 jQuery('.content_area').eq(index).fadeIn(); 63 64 //タブについているクラスselectを消し、 65 jQuery('.tab_area li').removeClass('select'); 66 67 //クリックされたタブのみにクラスselectをつけます。 68 jQuery(this).addClass('select') 69 }); 70});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/11 13:45