如何隐藏和显示twitter引导程序选项卡

How do I hide and show twitter bootstrap tabs?

本文关键字：twitter 显示 引导程序 选项 何隐藏 隐藏      更新时间：2024-07-01

我试图只在需要时显示隐藏的选项卡。我当前的代码如下：

<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();    
})

知道我做错了什么吗？代码完成后，该选项卡永远不会显示。

使用提供的代码，您正在尝试显示选项卡内容，即使这样也无法工作。

如文件中所述

每个选项卡都需要单独激活

它需要在data-toggle="tab"元素上激活，而不是在内容上激活。

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

您可以选择保留显式选择器[data-toggle="tab"][href="#data"]或在隐藏选项卡上设置id="tabID"。

相关文章：