Предисловие
Какое-то время назад я стал постепенно отказываться от jQuery в пользу нативного javascript. Это связано с тем, что поддержка старых браузеров перестала быть приоритетной и на первое место вышла скорость загрузки страницы. Я не смог найти минималистичный модуль вкладок с простой html разметкой – поэтому решил написать свой.
Демо, Исходный код на Github
HTML разметка
<div class="tabs">
<div class="tabs__toggle tabs__toggle_active">Вкладка 1</div>
<div class="tabs__toggle">Вкладка 2</div>
<div class="tabs__tab">
Содержимое первой вкладки
</div>
<div class="tabs__tab">
Содержимое второй вкладки
</div>
</div>
Если на одной странице нужно разместить несколько групп вкладок нужно просто разделить их в разные блоки '.tabs'. Расположение внутренних блоков влияет только на порядок их вывода. Вкладке по умолчанию следует добавить класс 'tabs__toggle_active'.