Загрузка...
Перейти к содержимому
 
En
Вход

При необходимости создания страниц третьего уровня рекомендуется использовать вкладки на страницах второго уровня вместо создания страниц третьего уровня. Страницы третьего уровня не отображаются в меню и поэтому неудобны использовании.

Обращаем внимание!
На странице с блоком, уже содержащим вкладки, создать блок общий для всех вкладок невозможно. Общие блоки нужно предусмотреть заранее, перед созданием вкладок. Поэтому рекомендуется изначально продумать структуру страницы с вкладками.
  • Для создания вкладки необходимо нажать в блоке и затем кнопку .
  • Созданные вкладки будут иметь следующий вид
  • Чтобы переименовать / упорядочить / скрыть / удалить вкладки, необходимо зайти в режим настройки параметров блока , нажав

Переименование вкладки

  • выберите вкладку из списка вкладок;
  • измените название вкладки в поле «Текст»;
  • нажмите «Принять» для сохранения изменений или «ОК» для сохранения изменений и закрытия окна.

Сортировка вкладок

  • выберите вкладку из списка вкладок;
  • нажмите на для перемещения вкладки на одну позицию вниз или нажмите на для перемещения вкладки на одну позицию вверх;
  • нажмите на для перемещения вкладки в самый низ списка вкладок или нажмите на для перемещения вкладки в самый верх списка вкладок;
  • нажмите «Принять» для сохранения изменений или «ОК» для сохранения изменений и закрытия окна.

Скрытие вкладок

  • выберите вкладку из списка вкладок;
  • поставьте галочку в поле «Скрыть эту вкладку»;
  • нажмите «Принять» для сохранения изменений или «ОК» для сохранения изменений и закрытия окна.

Удаление вкладок

  • выберите вкладку из списка вкладок;
  • нажмите на ;
  • нажмите «Принять» для сохранения изменений или «ОК» для сохранения изменений и закрытия окна.

Элемент с вкладками

Код

<ul id="myTab" class="mytab nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Вкладка1</a></li>
<li class=""><a href="#2" data-toggle="tab">Вкладка2</a></li>
<li class=""><a href="#3" data-toggle="tab">Вкладка3</a></li>
</ul>
<div id="myTabContent" class="tab-content tcon">
<div class="tab-pane fade active in" id="1">
<p>Текст1</p>
</div>
<div class="tab-pane fade" id="2">
<p>Текст2</p>
</div>
<div class="tab-pane fade" id="3">
<p>Текст3</p>
</div>
</div>

Внешний вид

Текст1

Текст2

Текст3