1

問題：

タブを完全に切り替える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');
})

シナリオ：

2番目のタブ（#tab2）をクリックすると、jQueryの機能に加えて、
（1）の最初のli要素をアクティブにします#myTab
（2）の最初の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 に答える