javascript - How do I hide and show twitter bootstrap tabs? - Stack Overflow

admin管理员组

文章数量:1278910

I'm trying to show a hidden tab only when needed. My current code looks like this:

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#data" data-toggle="tab" style="display:none;">New Tab</a></li>
</ul>

jquery:

$('#data').load('functions/test_function.php', { method: "example"}, function() {
    $('#data').tab('show'); 
   // $('#data').show();    
})

Any idea what I'm doing wrong? The tab is never displayed after the code pletes.

I'm trying to show a hidden tab only when needed. My current code looks like this:

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#data" data-toggle="tab" style="display:none;">New Tab</a></li>
</ul>

jquery:

$('#data').load('functions/test_function.php', { method: "example"}, function() {
    $('#data').tab('show'); 
   // $('#data').show();    
})

Any idea what I'm doing wrong? The tab is never displayed after the code pletes.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Jul 31, 2012 at 14:12 user1216398user1216398 1,9601313 gold badges3333 silver badges4141 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

With that provided code you are trying to display the tab content, and even that will not work.

As stated in the doc

each tab needs to be activated individually

And it needs to be activated on the data-toggle="tab" element, not the content.

$('#data').load('functions/test_function.php', { method: "example"}, function() {

    var $tab = $('[data-toggle="tab"][href="#data"]');
    // OR var $tab = $('#tabID');

    $tab.click(function(e) {      // Binding for later use (for user interaction)
        e.preventDefault();
        $tab.tab('show');
    });
    $tab.show();                  // Display the tab
    $tab.tab('show');             // Display the content
})

You can choose to keep the explicit selector [data-toggle="tab"][href="#data"] or set an id="tabID" on the hidden tab.

本文标签： javascriptHow do I hide and show twitter bootstrap tabsStack Overflow