Предисловие

Какое-то время назад я стал постепенно отказываться от 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'.