1

问题：

我有可以在选项卡之间完美切换的 jQuery 代码。但是，我想知道如何扩展它，以便它也激活 each 的第一个子元素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我点击第二
个li标签#myTab
（div#myTabContent

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

4

2 回答 2

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');

});
于 2012-06-06T19:34:13.653 回答
0

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

$(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');

});
于 2012-06-06T22:04:40.840 回答