javascript - Forcing bootstrap tab to be active - Stack Overflow

admin管理员组

文章数量:1319009

I have several tabs and sub tabs underneath #tab1.

<ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;">
    <li id="tab1"><a href="#tab1-tab" data-toggle="tab"></a></li>
    <li class="active" id="tab2"><a href="#tab2-tab" data-toggle="tab"></a></li>
    <li id="tab3"><a href="#tab3-tab" data-toggle="tab"></a></li>

</ul>


<div id="tab-content" class="tab-content">
    <div id="tab1-tab" class="tab-pane fade scrollable">
        <ul class="nav nav-pills"> 
            <li class="active"><a href="#first-subtab" data-toggle="tab"></a></li>
            <li><a href="#second-subtab" data-toggle="tab"></a></li>
            <li><a href="#third-subtab" data-toggle="tab"></a></li>
        </ul>
    <div id="subtab-container">
        <div id="subtab-tab-content" class="tab-content">
            <div id="first-subtab" class="tab-pane in active fade"></div>
            <div id="second-subtab" class="tab-pane fade"></div>
            <div id="third-subtab" class="tab-pane fade"></div>
        </div>
    </div>
</div>  

<div id="tab2" class="tab-pane in active fade">
    <table id="table2" class="table table-condensed"></table>
</div>          
<div id="tab3" class="tab-pane fade">
    <table id="table3" class="table table-condensed"></table>
</div>

Right now, I have a couple sets of data, when you select one set, it loads all the tabs with data. When you select another set, it updates all the tabs with the new data.

When it loads, I have #Tab2 as the main default active tab. When I click #tab1, I want #first-subtab to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data.

For example, I load data, it defaults to #tab2, and I click #tab1 -> third-sub tab. When I load another set it defaults to #tab2, I click #tab1-> INSTEAD OF GOING TO #first-subtab, IT GOES TO #third-subtab because I clicked it last.

I've tried to set the #first-subtab to default with the following:

$('#tab1').click(function(){
    $('#third-tab').removeClass('li.active');
    $('#first-tab').addClass('li.active');             
});

I've also tried to show/hide accordingly, but nothing will force the #first-subtab to be default... Any suggestions?

My plete html is 197 lines. When I use the google developer tools, and I've clicked on #first-subtab, the one that I want to be active, it's under the following:

html -> body -> div.layout.layout-vertical -> div#views.visible
 -> div#table-container.fill -> div#tab-content.tab-content
 -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a

I have several tabs and sub tabs underneath #tab1.

<ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;">
    <li id="tab1"><a href="#tab1-tab" data-toggle="tab"></a></li>
    <li class="active" id="tab2"><a href="#tab2-tab" data-toggle="tab"></a></li>
    <li id="tab3"><a href="#tab3-tab" data-toggle="tab"></a></li>

</ul>


<div id="tab-content" class="tab-content">
    <div id="tab1-tab" class="tab-pane fade scrollable">
        <ul class="nav nav-pills"> 
            <li class="active"><a href="#first-subtab" data-toggle="tab"></a></li>
            <li><a href="#second-subtab" data-toggle="tab"></a></li>
            <li><a href="#third-subtab" data-toggle="tab"></a></li>
        </ul>
    <div id="subtab-container">
        <div id="subtab-tab-content" class="tab-content">
            <div id="first-subtab" class="tab-pane in active fade"></div>
            <div id="second-subtab" class="tab-pane fade"></div>
            <div id="third-subtab" class="tab-pane fade"></div>
        </div>
    </div>
</div>  

<div id="tab2" class="tab-pane in active fade">
    <table id="table2" class="table table-condensed"></table>
</div>          
<div id="tab3" class="tab-pane fade">
    <table id="table3" class="table table-condensed"></table>
</div>

Right now, I have a couple sets of data, when you select one set, it loads all the tabs with data. When you select another set, it updates all the tabs with the new data.

When it loads, I have #Tab2 as the main default active tab. When I click #tab1, I want #first-subtab to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data.

For example, I load data, it defaults to #tab2, and I click #tab1 -> third-sub tab. When I load another set it defaults to #tab2, I click #tab1-> INSTEAD OF GOING TO #first-subtab, IT GOES TO #third-subtab because I clicked it last.

I've tried to set the #first-subtab to default with the following:

$('#tab1').click(function(){
    $('#third-tab').removeClass('li.active');
    $('#first-tab').addClass('li.active');             
});

I've also tried to show/hide accordingly, but nothing will force the #first-subtab to be default... Any suggestions?

My plete html is 197 lines. When I use the google developer tools, and I've clicked on #first-subtab, the one that I want to be active, it's under the following:

html -> body -> div.layout.layout-vertical -> div#views.visible
 -> div#table-container.fill -> div#tab-content.tab-content
 -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a

• javascript
• jquery
• html
• twitter-bootstrap
• tabs

Share Improve this question Follow edited Jan 4, 2018 at 19:51 Milad Rashidi 1,37644 gold badges2323 silver badges4040 bronze badges asked Jan 27, 2014 at 16:14 user2847749user2847749 36922 gold badges99 silver badges2828 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

To get the first sub tag active

Try:

 $('#tab1').click(function(){
            $('.nav-pills li').removeClass('active');
            $('.nav-pills li:first').addClass('active');             
        });

And use Guli's Suggestion to fix your tabs.

Look at Guli's fiddle for a merge of our two answers.

Your a tag has a href value to #tab2-tab :

    <li class="active" id="tab3"><a href="#tab3-tab" data-toggle="tab"></a></li>

And you div has a bad ID value (not the same that the anchor) :

        <div id="tab3" class="tab-pane fade">

Fix the ID of div like this

        <div id="tab3-tab" class="tab-pane fade">

and it will work perfectly.

Same thing for #tab2.

If add the answer of @Trevor it will be perfect for your needs.

JSFiddle Demo including Trevor point !

Thanks to Trevor's answer I was able to find the solution that worked for my code:

First, I had to add an id to my ul of my subtabs:

<ul id="subtabsID" class="nav nav-pills"> 

Then I used this to make the first-subtab the default subtab.

 $("#subtabsID > .active").removeClass('active');
 $("#subtabsID > :nth-child(1)").addClass('active');       
 $('#first-subtab').addClass('active in');  

本文标签： javascriptForcing bootstrap tab to be activeStack Overflow