Pure JavaScript tabs

В большинстве случаев возможно избежать избыточного подключения библиотек. Не всегда для простых вещей, таких как лайтбокс, модальное окно или табы необходимо тянуть в проект зависимость от jQuery и других библиотек.

Возможно обойтись и чистым JS.

Для примера давайте реализуем универсальный класс для такого UI паттерна, как табы. Нам понадобится чуть-чуть CSS и маленько чистого javascript. Для примера возьмем html-шаблон вида:

Наши табы будут работать опираясь на data-tab атрибут, он будет содержать идентификатор элемента, к которому мы будем добавлять\убирать класс active.

Инициализируем плагин:

var connectTabs = new Tabs();

Остается только написать css, который будет скрывать\показывать контент:

.b-tab {
display: none;
}
.b-tab.active {
display: block;
}

Код можно найти по ссылке —

Пример использования в реальном проекте(нужно зарегистрироваться =) ):