0

ページにタブ付きコンテンツを配置するコードを作成しています。このコードは、クリックするとその下のコンテンツを表示および非表示にするタブを作成します。アクティブなタブも白になり、非アクティブなタブは灰色になります。

タブ コンテンツはうまく機能しますが、同じページに複数のタブ コンテンツ グループを配置できるようにする必要があります。

タブのグループが複数ある場合、いずれかのグループをクリックすると、両方のコンテンツが影響を受けます。アクティブな白いタブが両方のグループから消去され、各グループの下のコンテンツが非表示になります。

タブの各グループに個別に変更を加える必要があります。

ここにフィドルがリンクされています：

http://jsfiddle.net/4bsdt/

これは私が問題を抱えている機能です:

$(".myTabz li").click(function() {
                taby = $(this);
        tabyHas = taby.hasClass('active');
        if (!tabyHas){
     //I WANT ONLY THE CURRENT GROUP OF TABS TO BE CLEARED OF THE ACTIVE CLASS
        $(".myTabz li").removeClass('active');
                    // NOT WORKING $(this).find('.myTabz li').removeClass('active');
                $(this).addClass("active");
    //I only want content in the current group of tabs to disappear and reappear
        $(".tabz_content").hide();
        var focused =  $(this).find("a").attr("href");
        $(focused).fadeIn();
        return false;
        }

4 つのタブを持つグループと 2 つのタブを持つグループの 2 つのタブ グループがあることがわかります。いずれかのグループをクリックすると、コンテンツが他のグループから消去されます...

ユーザーが現在クリックしている UL をターゲットにする必要があることはわかっていますが、これを達成する方法がわかりません。

4

3 に答える 3

1

次のように、セレクターの範囲を制限する必要があります ここで更新されたフィドルを参照してください

        $(".myTabz li").click(function () {
           taby = $(this);
           tabyHas = taby.hasClass('active');
           if (!tabyHas) {

              //***This line gets container of the current clicked "li"***
              var cntnr = $(this).closest('.wrapper');

              //***this line restricts scope of selector to container only***
              $(".myTabz li", cntnr).removeClass('active');

              //$(this).find('.myTabz li').removeClass('active');

              $(this).addClass("active");

              //I only want content in the current group of tabs to disappear and reappear
              //***this restricts the selector to the container only***
              $(".tabz_content", cntnr).hide();

              var focused = $(this).find("a").attr("href");
              $(focused).fadeIn();
              return false;
           }
        });
于 2013-05-07T13:34:36.103 に答える
0

以下を変更します。

  • $(".myTabz li").removeClass('active');になる$(this).closest(".myTabz").find("li").removeClass('active');
  • $(".tabz_content").hide();になる$(this).closest(".wrapper").find(".tabz_content").hide();

クリックした特定の周りのオブジェクトをターゲットにする必要がありliます。$(this).closest()クリックした .myTabz li に関連する特定のアイテムを見つける最も簡単な方法です。また、必要な数のレイヤーを上に移動することもできます。$(this).parent();

ここで JSFiddle を参照してください。

于 2013-05-07T13:39:54.890 に答える
0

タブと各グループのコンテンツを 1 つの div に配置し、その div を介して要素をトラバースできます。$(this).parent().find(...)

于 2013-05-07T13:35:58.247 に答える