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类元素的问题。

对不起它太长了。

使用时第一个匹配元素的Jquery选择不起作用：eq（0），first（）和nth-of-type方法

0 个答案: