始终使用 jQuery 激活特定 id 的第一个 ul 列表和第一个 div答案

【问题标题】：Always active the first ul list and the first div for certain id using jQuery始终使用 jQuery 激活特定 id 的第一个 ul 列表和第一个 div
【发布时间】：2012-06-06 19:25:56
【问题描述】：

问题：

我有可以在标签之间完美切换的 jQuery 代码。但是，我想知道如何扩展它，以便它还激活每个 id 的第一个子元素。

HTML 标签导航代码：

<div id="navtabs">
    <div>
        <a href="#tab1" class="active btn btn-info" data-toggle="tab"><i class="icon-home"></i>Start</a>
        <a href="#tab2" class="btn btn-info" data-toggle="tab"><i class="icon-book"></i>Essay</a>
        <a href="#tab3" class="btn btn-info" data-toggle="tab"><i class="icon-ok-sign"></i>Criteria</a>
        <a href="#tab4" class="btn btn-info" data-toggle="tab"><i class="icon-time"></i>Time</a>
    </div>
</div>

标签示例代码：

<div class="tab-pane" id="tab2">

    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#participants" data-toggle="tab">Participants</a></li>
        <li><a href="#gradevalues" data-toggle="tab">Criteria</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="participants">Text</div>
        <div class="tab-pane fade" id="gradevalues">Text</div>
    </div>

</div>

jQuery 代码：

$('#navtabs a[data-toggle="tab"]').on('shown', function () {
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');
})

场景：

当我单击第二个选项卡 (#tab2) 时，除了 jQuery 现在的功能之外，我还想：
(1) 激活#myTab中的第一个li元素
(2) 激活#myTabContent中的第一个div元素。

也就是说，始终确保第一个li元素有一个"class=active"，第一个div元素有一个"class=tab-pane fade in active"。

【问题讨论】：

标签： javascript jquery html tabs navigation

【解决方案1】：

试试这个：

$('#navtabs a[data-toggle="tab"]').on('shown', function () {
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');

    var tabID = $(this).attr('href');
    var lis = $(tabID).find('#myTab li');//Get collection of li's
    $.each(lis, function(){
        $(this).removeClass('active'); //Remove the active class from each li
    });   
    $(tabID).find('#myTab li:eq(0)').addClass('active');//Add active class 

    //Same process for divs
    var divs = $(tabID).find('#myTabContent div');
    $.each(divs, function(){
        $(this).removeClass('in active');
    });
    $(tabID).find('#myTabContent div:eq(0)').addClass('in active');

});

【讨论】：

感谢您的建议，它按预期工作。 eq(0) 究竟是做什么的？为了我自己的学习，我会很感激一个链接，我可以在其中阅读更多有关此内容的信息。再次，非常感谢！
所有与 jQuery 相关的阅读请参考jQuery.com。对于这一特殊外观here
我更新了答案以从所有这些类中删除该类，但如果您的 senerio 中不需要该代码，您可以删除该代码。 “eq”伪选择器是equal的缩写，括号中的数字代表索引号。所以它是说“在myTab容器中选择索引为0的li”。你可以阅读它here。它也可以用作这样的函数：$(this).find('#myTab li').eq(0).addClass('active')
我刚刚意识到，如果您在一个页面上有多个选项卡，这将无法正常工作。 jQuery 现在适用于所有#myTab 和所有#myTabContent，但我只希望它适用于某个选项卡，例如 id=tab2。
我编辑了答案以解决您当前的问题。只需获取 <a> 元素的 href 值，这是您想要的选项卡的 id。

【解决方案2】：

这是我想出的，效果很好。我只需要获取它使用的是哪个选项卡：

$(this).attr('href')

最后的代码是这样的：

$('#navtabs a[data-toggle="tab"]').on('shown', function () 
{
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');

    var lis = $($(this).attr('href')).find('#myTab li');

    $.each(lis, function(){
        $(this).removeClass('active');
    });

    $($(this).attr('href')).find('#myTab li:eq(0)').addClass('active');

    var divs = $($(this).attr('href')).find('#myTabContent div');

    $.each(divs, function(){
        $(this).removeClass('in active');
    });

    $($(this).attr('href')).find('#myTabContent div:eq(0)').addClass('in active');

});

【讨论】：