7

私はWordpressのテーマ（スレート）を実行しています。それには、タブを実装するショートコードが付属していますjquery.tabs.min.js.

彼らのショートコードを使用してタブをネストしようとしましたが、おそらくショートコードの設計方法が原因でうまくいきませんでした.

すべてが機能していますが、私を混乱させる問題が 1 つあります。以前の親タブのサブタブよりも少ないタブを含むサブタブが読み込まれると、サブタブのスピルオーバーが発生し、jQuery がサブタブを取得します前のグループから、それらを現在のタブに追加します。

実際の例はこちらです。エクササイズ エリアの「ウィンター スポーツ アクティビティ」サブタブもナイトライフ エリアに読み込まれ、遠足親タブの博物館と観光名所もカレンダーの親タブに読み込まれることに注意してください。 ）。

親タブを制御するための私
の初心者の jQuery コードを以下に示します。

$(function(){
    var subcat = $('.sub-categories'),
        subdivfirst = $('.sub-categories div:first'),
        subdiv = $('.sub-categories div'),
        cattitlefirst = $('.categories ul li:first'),
        cattitle = $('.categories ul li');

        subcat.children('div').hide();  
        subdivfirst.show();     
        cattitlefirst.addClass('active');


        $('.categories li a').click(function(){
            var $this = $(this);

            cattitle.removeClass('active');
            subcat.children('div').hide();

            $this.parent('li').addClass('active');

            var catLink = $this.attr('id');
            var showcat = $('div #sub-' + catLink);

            showcat
                .fadeIn(600)    
                .find('.panes').show()
        });
});

そして、これらの「.subcategoriesdiv」のそれぞれに、標準の jQueryUI タブが含まれます。

jQueryUI タブと私が作成した追加の自家製タブとの間に何らかの競合があるに違いないと思いますが、それを追跡する方法がわかりません。私のコードをクリーンアップするためのヘルプ、ヒント、またはアイデアは大歓迎です。

4

1 に答える 1

1

カテゴリとサブカテゴリの両方に標準の jquery UI タブを使用しないのはなぜですか? CSS の両方にカスタム クラスを簡単に追加でき、サブタブの最初のタブが自動的に開きます。または、Cookie を使用すると、そのメインタブで開いていた最後のタブが開きます。

私が考えていたのはそのようなものですhttp://jsfiddle.net/3H33m

$(document).ready(function(){
    $('#Categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });

    $('.sub-categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });
});

第 1 および第 2 カテゴリにコンテンツのみを追加し、それらにサブアイテムを追加しました。2番目のメインカテゴリのサブアイテムは、基本的に最初からコピーされます。HTML 構造も変更しましたが、要素をすばやく左右に配置したかったからです。それはあなたの構造でもうまくいくはずです。

于 2012-12-01T10:52:03.533 に答える