Question

我正试图让页面上的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 -->

Answer 1

bootstrap示例不完整 - 您需要使用id的tab元素上的class =“pill-pane”（或者可能是tab-pane）

<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 -->

Answer 2

如果你将内容的类设置为class =“tab-content”，那么我认为display：none无法正常工作，也不需要内联样式。

页面选项卡上的Twitter Bootstrap：不隐藏选项卡内容

2 个答案: