Загрузка Twitter на вкладках страницы: не скрывает содержимое вкладки

#jquery #tabs #twitter-bootstrap

#jquery #вкладки #twitter-bootstrap

Вопрос:

Я пытаюсь заставить работать содержимое с вкладками 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 -->

1. Можете ли вы опубликовать свой CSS? Если классы добавляются успешно, скорее всего, ваша ошибка в вашем CSS.

2. ах, вы были правы. Я понял, что мне нужно установить класс для pill-content divs с отображением none, а затем, когда javascript переключает классы на active в блоке css для отображения. Я думал, что что-то уже есть для этого int he css, но теперь это работает.

Ответ №1:

Пример начальной загрузки является неполным — вам нужен 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 -->

Ответ №2:

Если вы установите для класса содержимого значение class=»tab-content», то я думаю, что display:none будет работать правильно и не нуждается в встроенном стиле.