Shortcodes Ultimateのsu_tabでカレントタブを別ページからgetパラメータで変更する

Shortcodes Ultimateのsu_tabで、別ページから直接タブを操作出来なかったためカレントタブを変更するjQueryを作成しました。

url: su_tabのページ?category=slug で呼出し
su_tab のタブにそれぞれcategoryのクラス class=”slug” を設定

カレントタブはページを表示した時のみ変更する。
urlパラメータが無い場合は、デフォルトのカレントを表示する。

jsの呼出し方法などは省略しています。
本人の覚書ですので責任は持ちません。

/** 
 * リンクurlのgetパラメータからカテゴリーを取得して
 *  su_tabのカレントを変更する
 * 
 *  リンク https://xxxxxxxxxxxxxxxxxx?category=カテゴリーslug
 *     ↓
 *  [su_tab class="カテゴリーslug"]
 *  コンテンツ部にはタブのクラスが付与される・・・たぶん
 */

jQuery(function($) {
    $(document).ready( function(){
        var pageParam;
        pageParam = $(location).attr('search');
        
        if(pageParam) {
            // 「&」が含まれている場合は「&」で分割
            var param = pageParam.split('&');
            // パラメータを格納する用の配列を用意
            var paramArray = [];
            // 用意した配列にパラメータを格納
            for (i = 0; i < param.length; i++) {
              var paramItem = param[i].split('=');
              paramArray[paramItem[0]] = paramItem[1];
              
              //alert('Name:'+ paramItem[0]);
              var getItem = paramItem[0].split('?');
              //alert('Name:'+ getItem[1]);
              
              if(getItem[1] == 'category' ) {
                  //カテゴリーを取得
                  var categoryParm = paramItem[1];
                  //alert('Param:'+ categoryParm);
              }
            }
            
            // url?category=xxxならば
            if(categoryParm) {
                //カレントの.su-tabs-currentクラスを削除
                //$('.su-tabs .su-tabs-nav span').removeClass('su-tabs-current');
                $('.su-tabs .su-tabs-nav span.su-tabs-current').removeClass('su-tabs-current');
                
                // su-tabs
                // タブ su-tabs-nav の su-tabs-current を追加
                $('.su-tabs .su-tabs-nav .'+ categoryParm).addClass('su-tabs-current');
                
                // コンテンツ su-taabs-panes
                //カレントの.su-tabs-pane-openクラスを削除
                //$('.su-tabs-panes .su-tabs-pane').removeClass('su-tabs-pane-open');
                $('.su-tabs-panes .su-tabs-pane.su-tabs-pane-open').removeClass('su-tabs-pane-open');

                // タブ su-tabs-nav の su-tabs-current を追加
                $('.su-tabs-panes .'+ categoryParm).addClass('su-tabs-pane-open');
            }        
        }
            
    });
});

投稿日

カテゴリー:

投稿者:

タグ: