Управление несколькими вкладками с помощью одной навигационной вкладки

У меня есть обычная вкладка Twitter Bootstrap 3. То, что я хочу сделать, - это управлять несколькими контейнерами tab-content с одним элементом nav-tabs.

Вот пример: jsfiddle

В этом примере при изменении вкладок изменяется только первый. Я хочу, чтобы оба контейнера изменились, а не только первый.

Спасибо!

Ответы

Ответ 1

Здесь я обновляю jsfiddle

Я добавляю атрибут data-target для a-элементов и изменяет идентификаторы во втором вкладке-содержании

Я изменил эти строки,

Yours:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

Мое обновление:

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a>  </li>

И второе содержимое вкладки, Ваше:

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

Мое обновление:

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2.</p>
    </div>
</div>

Ответ 2

Вместо этого вы должны просто использовать класс. Я просто работал над загрузочным содержимым Bootstrap 3 внутри модального окна. Был попыткой открыть модальное окно для правильной вкладки, но мне нужно было открыть две вкладки, одну для модального заголовка и одну для контента, с дополнительными вкладками nab в нижнем колонтитуле.

Я использовал класс, и он сработал. Итак, измените <div class="tab-pane fade in active" id="home"> на <div class="tab-pane fade in active home"> и <a href="#home" data-toggle="tab"> на <a href=".home" data-toggle="tab">... для меня.

Ответ 3

Идентификатор должен быть уникальным.

Читать Два HTML-элемента с одинаковым атрибутом id: насколько это плохо?

проблема с вашим кодом

Два элемента с id home, profile и myTabContent.

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

<hr>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

и вы даете href="#home", который будет нацелен на первый элемент с id.Не все элементы с id.

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">C1</a></li>
    <li><a href="#profile" data-toggle="tab">C2</a></li>
</ul>