it-swarm.com.ru

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

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

Вот пример: jsfiddle

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

Спасибо!

18
intelis

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

Я добавляю атрибут data-target к a-elements и меняю идентификаторы во втором tab-content

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

С уважением:

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

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

Я использовал класс, и это сработало. Итак, изменение <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"> ... сработало для меня.

14
OMNIA Design and Marketing

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

Читать Два HTML-элемента с одинаковым атрибутом 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", который нацеливается на первый элемент с идентификатором. Не все элементы с идентификатором.

<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>
0
Tushar Gupta