页面标签上的 Twitter Bootstrap：不隐藏标签内容

Posted 2023-05-08

【中文标题】页面标签上的 Twitter Bootstrap：不隐藏标签内容

【英文标题】：Twitter Bootstrap on page tabs: not hiding tab content

【发布时间】：2011-11-28 14:38:36

【问题描述】：

我正在尝试让页面标签式内容上的 twitter 正常工作。我的选项卡可以在选项卡上切换活动类。我已经包含了 jquery 和 bootstrap-tabs.js，但以下代码似乎无法让选项卡式内容按应有的方式隐藏/显示。任何可能是简单修复的帮助将不胜感激。

<div class="span8">
        <ul class="tabs" data-tabs="tabs">
            <li class="active"><a href="#2009">2009</a></li>
            <li><a href="#2010">2010</a></li>
            <li><a href="#2011">2011</a></li>
        </ul>
        <div class="pill-content">
            <div class="active" id="2009">
                2009 copy
            </div>
            <div id="2010">
                2010 copy
            </div>
            <div id="2011">
                2011 copy
            </div>

        </div>
        <script>
        $(function () 
            $('.tabs').tabs()
        )
        </script>
    </div><!-- end span 8 -->

【问题讨论】：

你能发布你的 CSS 吗？如果类已成功添加，则您的错误很可能在您的 CSS 中。

啊，你是对的。我发现我需要为药丸内容 div 设置一个类，显示为无，然后当 javascript 将类切换为在 css 中活动以显示块。我以为那个 int 他的 css 已经有了一些东西，但我现在让它工作了。

【参考方案1】：

引导示例不完整 - 您需要 class="pill-pane"（或者可能是 tab-pane）在带有 id 的选项卡元素上

<div class="span8">
    <ul class="tabs" data-tabs="tabs">
        <li class="active"><a href="#2009">2009</a></li>
        <li><a href="#2010">2010</a></li>
        <li><a href="#2011">2011</a></li>
    </ul>
    <div class="pill-content">
        <div class="active pill-pane" id="2009">
            2009 copy
        </div>
        <div class="pill-pane" id="2010">
            2010 copy
        </div>
        <div class="pill-pane" id="2011">
            2011 copy
        </div>

    </div>
    <script>
    $(function () 
        $('.tabs').tabs()
    )
    </script>
</div><!-- end span 8 -->

【讨论】：

就我而言，我缺少父元素上的 class="tab-content"。

class="tab-content" 是问题:-)

【参考方案2】：

如果您将内容上的类设置为 class="tab-content" 那么我认为 display:none 可以正常工作并且不需要内联样式。