tabsВкладки и подвкладки в постах

insideЧто умеет

• Обычные вкладки и один уровень подвкладок — без двух разных скриптов.
• Одинаковые названия вкладок в разных постах не смешивают содержимое.
• Работает с подгруженными сообщениями, переключается мышью и клавиатурой.
• Структура отделена от оформления: один BB-шаблон можно разложить горизонтально или колонкой только через CSS.

setupУстановка

1. Добавьте BB-теги

   Откройте Администрирование → Формы → Пользовательские BB-теги и вставьте четыре строки. Системный [block=...] туда добавлять не нужно: форум сам превращает его в div с указанным классом.

tabtitle[/data-tab-id]:a
tabtext[/id]:a
innertabtitle[/data-tab-id]:a
innertabtext[/id]:a

2. Подключите файлы

   Вставьте стиль в HTML верх, скрипт — в HTML низ. Если подключаете оба кода в одном месте, сначала должен идти CSS, затем JS.

<link rel="stylesheet" href="https://mojitostudio.ru/scripts/tabs/tabs.css">
<script src="https://mojitostudio.ru/scripts/tabs/tabs.js"></script>

copyКак собирать вкладки

У заголовка и содержимого должен быть одинаковый ключ: about соединяется с about. Используйте короткие слова латиницей без пробелов.

Обычные вкладки

[block=tabs-container]
[block=tabs-header]
[tabtitle=about]Общее[/tabtitle]
[tabtitle=story]История[/tabtitle]
[tabtitle=relations]Отношения[/tabtitle]
[/block]

[block=tabs-content]
[tabtext=about]Содержимое вкладки «Общее».[/tabtext]
[tabtext=story]Содержимое вкладки «История».[/tabtext]
[tabtext=relations]Содержимое вкладки «Отношения».[/tabtext]
[/block]
[/block]

Вкладки с подвкладками

[block=tabs-container]
[block=tabs-header]
[tabtitle=profile]Персонаж[/tabtitle]
[tabtitle=episodes]Эпизоды[/tabtitle]
[/block]
[block=tabs-content]
[tabtext=profile]
[block=inner-tabs]
[block=inner-tabs-header]
[innertabtitle=appearance]Внешность[/innertabtitle]
[innertabtitle=character]Характер[/innertabtitle]
[/block]
[block=inner-tabs-content]
[innertabtext=appearance]Описание внешности.[/innertabtext]
[innertabtext=character]Описание характера.[/innertabtext]
[/block]
[/block]
[/tabtext]
[tabtext=episodes]Список эпизодов.[/tabtext]
[/block]
[/block]

layoutКуда поставить заголовки

Меняется только первая строка шаблона. Внутренняя структура остаётся прежней.

Для перекраски откройте начало tabs.css: там отдельно вынесены фон, цвет текста, акцент и линии. Сам JavaScript для оформления менять не нужно.