サポート » プラグイン » Display Posts – Paginationを用いたタブ内でのページ送りの件で

  • https://ja.wordpress.org/support/topic/display-posts%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%81%a7%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e8%a1%a8%e7%a4%ba%e3%81%ae%e4%bb%b6/

    先日、こちらにてDisplay Postsのページ送りについて質問させていただき、無事解決いたしました、その折はありがとうございました。

    今回ご質問させていただきたいのは、jQueryを用いたタブ切り替えのタブ内にて、Display Postsのページ送りを実装させた場合、ページを送りますと、初期表示のタブが表示されてしまいまして、該当のタブをクリックにて表示させると、ページ送りにはなってはいるのですが。

    タブを初期表示に戻さずにDisplay Postsを表示させてるタブのまま、ページを送るには、どうしたら良いものでしょうか??

    タブのHTMLは、

    <div class="all_area">
          <ul class="tab_area">
            <li id="tab1" class="select">Tab1</li>
            <li id="tab2">Tab2</li>
            <li id="tab3">Tab3</li>
          </ul> 
        <!--  tab1 start --> 
     <div class="content_area">
         <ul class="list_area">
           <li>これはTab1の内容です</li>
           <li>これはTab1の内容です</li>
           <li>これはTab1の内容です</li>
           <li>これはTab1の内容です</li>
         </ul>
        <!--  /tab1 end -->
        </div>
       <!--  tab2 start --> 
     <div class="content_area hide">
         これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。
    
       <!--  /tab2 end -->
        </div>
        <!--  tab3 start --> 
     <div class="content_area hide">
         これはTab3の内容です<br>
         <img src="tabsample.gif" width="300" height="150">
        
    
       <!--  /tab3 end -->
        </div>
       <!-- /tab area end --> 
        </div>

    jQueryは、

    //ダイレクトリンク
    jQuery(function() {
    	//location.hashで#以下を取得 変数hashに格納
    		var hash = location.hash;	
    		//hashの中に#tab~が存在するか調べる。
    		hash = (hash.match(/^#tab\d+$/) || [])[0];
    	   
    		 //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3)	
    	    if(jQuery(hash).length){
    		var tabname = hash.slice(1) ;
    		} else{
    	    // 要素が存在しなければtabnameにtab1を代入する
    	    var tabname = "tab1";}
    		//コンテンツを一度すべて非表示にし、
    		jQuery('.content_area').css('display','none');
    
    		//一度タブについているクラスselectを消し、
    		jQuery('.tab_area li').removeClass('select');
    
    		var tabno = jQuery('ul.tab_area li#' + tabname).index();
    		
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		jQuery('.content_area').eq(tabno).fadeIn();
    		
    		//クリックされたタブのみにクラスselectをつけます。
    		jQuery('ul.tab_area li').eq(tabno).addClass('select')
    
    		jQuery('a').on('click', function() {
    	var tabname = (jQuery(this).attr('href').match(/#(tab\d+$)/) || [])[1];
    	if (!tabname) {
    		return;
    	}
    
    	//コンテンツを一度すべて非表示にし、
    		jQuery('.content_area').css('display','none');
    
    		//一度タブについているクラスselectを消し、
    		jQuery('.tab_area li').removeClass('select');
    
    		var tabno = jQuery('ul.tab_area li#' + tabname).index();
    		
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		jQuery('.content_area').eq(tabno).fadeIn();
    		
    		//クリックされたタブのみにクラスselectをつけます。
    		jQuery('ul.tab_area li').eq(tabno).addClass('select')
    })
    	
    			});
    
    jQuery(function() {
    	//クリックしたときのファンクションをまとめて指定
    	jQuery('ul.tab_area li').click(function() {
    		//.index()を使いクリックされたタブが何番目かを調べ、
    //		indexという変数に代入します。
    		var index = jQuery('ul.tab_area li').index(this);
    
    		//コンテンツを一度すべて非表示にし、
    		jQuery('.content_area').css('display','none');
    
    		//クリックされたタブと同じ順番のコンテンツを表示します。
    		jQuery('.content_area').eq(index).fadeIn();
    
    		//タブについているクラスselectを消し、
    		jQuery('.tab_area li').removeClass('select');
    
    		//クリックされたタブのみにクラスselectをつけます。
    		jQuery(this).addClass('select')
    	});
    });
    
    jQuery( window ).on( 'load', function() {
      id    = location.hash;
      speed = 0;
      headerHight = 180; // 固定ヘッダーの高さ
      if ( '' != id ) {
        pos = jQuery( id ).offset().top - headerHight;
        jQuery( 'html' ).animate({ scrollTop: pos }, speed );
      }
    });

    になります。
    こちらのタブも以前、質問させていただいたタブになります。
    https://ja.wordpress.org/support/topic/%e3%82%bf%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/

    以上、よろしくのほど、お願いいたします。

  • トピック「Display Posts – Paginationを用いたタブ内でのページ送りの件で」には新たに返信することはできません。