<h2>Первый контейнер</h2>
<div class="my-tab1">
<div class="container-buttons">
<a href="#" data-block="one">Первый</a>
<a href="#" data-block="two">Второй</a>
</div>
<div class="container-block">
<div data-block="one">Текст первого блока</div>
<div data-block="two">Текст второго блока</div>
</div>
</div>
<h2>Копия первого контейнера</h2>
<div class="my-tab1">
<div class="container-buttons">
<a href="#" data-block="one">Первый</a>
<a href="#" data-block="two">Второй</a>
</div>
<div class="container-block">
<div data-block="one">Текст первого блока</div>
<div data-block="two">Текст второго блока</div>
</div>
</div>
<h2>Второй контейнер</h2>
<div class="my-tab2">
<div class="container-buttons">
<a href="#" data-block="one">Первый</a>
<a href="#" data-block="two">Второй</a>
<a href="#" data-block="three">Третий</a>
</div>
<div class="container-block">
<div data-block="one">Текст первого блока</div>
<div data-block="two">Текст второго блока</div>
<div data-block="three">Текст третьего блока</div>
</div>
</div>.container-block > div:not(:first-child) {
display: none;
};(function () {
'use strict';
window.tabs = function (options) {
var setting = Object.assign({}, {
/* Селектор общего контейнера табов */
container: '.container',
/* Селектор кнопок табов */
buttons: '.container-buttons > a',
/* Селектор содержимого табов */
block: '.container-block > div',
/* Название data-* атриубта для идентификации содержимого таба */
dataAttr: 'block',
/* Название события, при котором табы будут открыватся */
trigger: 'click',
/* CSS значение, если блок показан и если скрыт. Например если разметка на flex, то свойство show должно быть "flex" */
display: {
show: 'block',
hide: 'none'
}
}, options || {});
var $containers = document.querySelectorAll(setting.container);
var events = setting.trigger.split(' ');
Array.prototype.forEach.call($containers, function ($container) {
var selector = {
$buttons: $container.querySelectorAll(setting.buttons),
$block: $container.querySelectorAll(setting.block)
};
Array.prototype.forEach.call(selector.$buttons, function ($button) {
events.forEach(function (event) {
$button.addEventListener(event, function (e) {
e.preventDefault();
var uuid = this.dataset[setting.dataAttr];
Array.prototype.forEach.call(selector.$block, function ($block) {
if ($block.dataset[setting.dataAttr] === uuid) {
$block.style.display = setting.display.show;
} else {
$block.style.display = setting.display.hide;
}
});
});
})
});
});
};
}());
;(function () {
'use strict';
window.tabs({
container: '.my-tab1'
});
window.tabs({
container: '.my-tab2',
trigger: 'click mouseenter'
});
}());
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.