javascript - :eq(0)、first()、および nth-of-type メソッドを使用すると、最初に一致する要素の Jquery 選択が機能しない

Question

私のウェブサイトにはタブがあります。タブの 1 つで、別のタブ クラスターです。

次の Jquery を使用すると、内側のタブは期待どおりに動作しますが、外側のタブ クラスターを変更しようとすると、最初は動作しますが、別の外側のタブ ヘッダーをクリックすると、発信する外側のタブのクラスが変更されません。 tabs_inactive に変更して、コンテンツが表示されたままになるようにします。

他の外側のタブ ヘッドをもう一度クリックすると、すべてが期待どおりに機能しますが、最初の外側のタブをクリックして戻すと、内側のタブの以前にアクティブだったコンテンツが非アクティブになり、正しい内側のタブ ヘッドをクリックする必要があります。リンクをクリックして、内部タブのコンテンツを再度表示します。

各タブ クラスター全体で同じ tab_active クラスと tab_inactive クラスを使用して、CSS の重複を回避し、サイト全体のすべてのタブ クラスターに同じ関数を使用できるようにしたいと考えています。これは、内側のタブが常に外側のタブ内に埋め込まれているとは限らないためです。集まる：

function toggle_visibility_2() {

    $(".tab_link").click(function() {

    var tab_head = $(this).attr('id'); 
    var group = $('#'+[tab_head]).parents('.tabs_parent').attr('id');
    var splitted = tab_head.split("_");
    var last = splitted[splitted.length-1];
    var content = [group]+"_"+[last]; 

    if (group == "calendartab")
    {
        //get the active month
        var activeid = $('.monthtabs .active a').attr("id"); 
        var splitted = activeid.split("_");
        var month = splitted[1];

        // get the active year
        var activetext = $('#'+[tab_head]).text(); 
        var year = parseInt(activetext);
    }


        // make active tab content inactive 
        $("."+[group]+" .tabs_active").first().removeClass('tabs_active').addClass(' tabs_inactive ');
        // make active tab_link inactive
        $("#"+[group]+" a.tab_link").removeClass('tabs_active').addClass(' tabs_inactive ');
        // make tab content active
        $("#"+[content]).removeClass('tabs_inactive').addClass(' tabs_active ');
        // make tab_head content active
        $("#"+[tab_head]).removeClass('tabs_inactive').addClass(' tabs_active ');


    if (group == "calendartab")
    {
        $('#'+[year]+'_'+[month]+'_link').parent().addClass(' active ');
        $('.calendar #'+[year]+'_'+[month]).addClass(' active ');

    }

    return false;   

    });

}

これは、上記のコードの次のセクションのすべてが同時に発生したためだと思ったので、"."+[group]+" .tabs_active").first()実際には存在しないため、見つけることができません。

            // make active tab content inactive 
        $("."+[group]+" .tabs_active").first().removeClass('tabs_active').addClass(' tabs_inactive ');
        // make active tab_link inactive
        $("#"+[group]+" a.tab_link").removeClass('tabs_active').addClass(' tabs_inactive ');
        // make tab content active
        $("#"+[content]).removeClass('tabs_inactive').addClass(' tabs_active ');
        // make tab_head content active
        $("#"+[tab_head]).removeClass('tabs_inactive').addClass(' tabs_active ');

そこで、コールバックを強制するために、このセクションを次のセクションに置き換えてみました。

        // make active tab content inactive
    $("."+[group]+" .tabs_active").first().removeClass('tabs_active').addClass(' tabs_inactive ');
        // make active tab_link inactive
        $("#"+[group]+" a.tab_link").removeClass('tabs_active').addClass(' tabs_inactive ');

    setTimeout(function() {
        // code will happen after the timeout has completed

        // make tab content active
        $("#"+[content]).removeClass('tabs_inactive').addClass(' tabs_active ');
        // make tab_head content active
        $("#"+[tab_head]).removeClass('tabs_inactive').addClass(' tabs_active ');

    }, 200); // time delay

最初に一致した要素を選択するためのさまざまな方法も試しましたが、成功しませんでした:

$("."+[group]+" .tabs_active").first().removeClass('tabs_active').addClass(' tabs_inactive ');

$("."+[group]+" .tabs_active:first").removeClass('tabs_active').addClass(' tabs_inactive ');

$("."+[group]+" .tabs_active").eq(0).removeClass('tabs_active').addClass(' tabs_inactive ');

$("."+[group]+" .tabs_active:eq(0)").removeClass('tabs_active').addClass(' tabs_inactive ');

$("."+[group]).find(".tabs_active:nth-of-type(1)").removeClass('tabs_active').addClass(' tabs_inactive ');

HTML:

<div class="midbanner">
<div id="tabs" class="product_tabs">
<div class="tabs_header" >

<ul id="admin" class="tabs_parent">
        <li><a href="#" class="tabs_active tab_link" id="admin_tabhead_availability">Availability</a></li><!--  -->
        <li><a href="#" class="tabs_inactive tab_link" id="admin_tabhead_articles">Other stuff</a></li><!--
-->    
</ul>

</div>

<div class="admin">
<div class="tabs_active" id="admin_availability">

 SOME EXTERNAL TAB CONTENT

<div id="calendar_tabs" class="product_tabs">
<div class="tabs_header">

<ul id="calendartab" class="tabs_parent">
        <li><a href="#" class="tabs_active tab_link" id="calendar_tabhead_one">
        foo 
        </a></li><!-- 
    --><li><a href="#" class="tabs_inactive tab_link" id="calendar_tabhead_two">
    bar
        </a></li><!--
    -->
    <li><a href="#" class="tabs_inactive tab_link" id="calendar_tabhead_three">
    foobar
        </a></li>
</ul>

</div>

<div class="calendartab">
<div class="tabs_active " id="calendartab_one">

calendartab_one content

</div>

<div class="tabs_inactive " id="calendartab_two">

calendartab_two content

</div>

<div class="tabs_inactive " id="calendartab_three">

calendartab_three content

</div>
</div>

<p class="clearcontent">&nbsp;</p>

</div>

</div>  <!-- end of availability-->      


<div class="tabs_inactive" id="admin_articles">

<div >
<h2>Some other stuff will go in here </h2>
<p>&nbsp;</p>
<p>Nothing to see right now</p>
<p>&nbsp;</p>

</div>


</div><!-- end of two -->



</div> <!-- end of tab group -->      

</div> <!-- end of #tabs -->
<p class="clear">&nbsp;</p>
</div>

したがって、最初の .tabs_active クラス要素のみを正確に選択する方法の問題を解決しようとしています。

すみません、とても長いです。