Табы

Примеры

Заголовок уценки

  • элемент списка 1

  • элемент списка 2

Другой заголовок Markdown

  • элемент списка 3

  • элемент списка 4

Синхронизация нескольких групп вкладок

Рассмотрим пример, когда у вас есть что-то вроде одной табы для каждого языка, и у вас есть несколько таких множеств вкладок на странице. Возможно, вы захотите, чтобы они все переключались вместе. В следующем примере выбор Go или Python в одном множестве вкладок переключает другой множество вкладок для соответствия. У нас есть Javascript, который загружается на каждой странице, что позволяет вам сделать это, установив одинаковые атрибуты data-group. Атрибуты data-target по-прежнему должны указывать на уникальные идентификаторы div.

Идти

Go content here

Питон

Python content here

И немного контента между двумя наборами, просто для удовольствия…

Идти

Go content here

Питон

Python content here

HTML

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#tab3">TAB 1 HEADER</a></li>
  <li><a data-toggle="tab" data-target="#tab4">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
<div id="tab3" class="tab-pane fade in active" markdown="1">

##### A Markdown header

- list item 1
- list item 2
<hr>
</div>
<div id="tab4" class="tab-pane fade" markdown="1">

##### Another Markdown header

- list item 3
- list item 4
<hr>
</div>
</div>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#go" data-group="go">Go</a></li>
  <li><a data-toggle="tab" data-target="#python" data-group="python">Python</a></li>
</ul>
<div class="tab-content">
  <div id="go" class="tab-pane fade in active">Go content here<hr></div>
  <div id="python" class="tab-pane fade in">Python content here<hr></div>
</div>

And some content between the two sets, just for fun...

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#go-2" data-group="go">Go</a></li>
  <li><a data-toggle="tab" data-target="#python-2" data-group="python">Python</a></li>
</ul>
<div class="tab-content">
  <div id="go-2" class="tab-pane fade in active">Go content here<hr></div>
  <div id="python-2" class="tab-pane fade in">Python content here<hr></div>