javascript - 使用 :eq(0)、first() 和 nth-of-type 方法时，第一个匹配元素的 Jquery 选择不起作用

Question

我的网站上有标签。在其中一个选项卡中，是另一个选项卡簇。

使用以下 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 类元素的问题。

抱歉这么长。