Табы на своем сайте можно сделать на «чистом» CSS и на JavaScript. Каждый может выбрать себе наиболее подходящий способ.
Табы — это вкладки. Они удобны тем, что позволяют очень компактно уместить много информации на веб-странице. По сути, вы размещаете табы (несколько вкладок) с названиями информации, которая под ними содержится. Пользователь нажимает на нужный таб и ему открывается соответствующая информация. То есть каждая отдельная вкладка — это отдельный блок информации, который открывается при ее активации.
С технической стороны, табы представляют собой ссылки и другие HTML-компоненты, которые скрыты от пользователя до момента их активации. Оформить табы можно как угодно: ограничение — полет вашей фантазии и навыков работы с CSS.
Табы CSS
Табы при помощи «чистого» CSS можно реализовать несколькими способами. Наиболее популярный способ — это реализация с использованием радиокнопок.
Допустим мы имеем вот такой HTML-код:
<div class="mytabs">
<input type="radio" name="mytab-button" id="mytab-button-1" value="" checked>
<label for="mytab-button-1">Вкладка 1</label>
<input type="radio" name="mytab-button" id="mytab-button-2" value="">
<label for="mytab-button-2">Вкладка 2</label>
<input type="radio" name="mytab-button" id="mytab-button-3" value="">
<label for="mytab-button-3">Вкладка 3</label>
<div id="mycontent-1">
Информация, содержащаяся в первом табе...
</div>
<div id="mycontent-2">
Информация, содержащаяся во втором табе...
</div>
<div id="mycontent-3">
Информация, содержащаяся в третьем табе...
</div>
</div>
Код CSS тогда будет таким:
.mytabs {
font-size: 0;
}
.mytabs>input[type="radio"] {
display: none;
}
.mytabs>div {
/* изначально скрываем контент от пользователей */
display: none;
border: 2px solid #e5e5e5;
padding: 12px 20px;
font-size: 18px;
}
/* делаем видимым контент, который выбран пользователем в качестве активированной радиокнопки */
#mytab-button-1:checked~#mycontent-1,
#mytab-bbutton-2:checked~#mycontent-2,
#mytab-button-3:checked~#mycontent-3 {
display: block;
}
.mytabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f4f4f4;
border: 2px solid #e5e5e5;
padding: 4px 10px;
font-size: 18px;
line-height: 1.7;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
cursor: pointer;
position: relative;
top: 2px;
}
.mytabs>label:not(:first-of-type) {
border-left: none;
}
.mytabs>input[type="radio"]:checked+label {
background-color: #eee;
border-bottom: 1px solid #eee;
}
Нужн понимать, что это всего лишь одна вариация исполнения. Даже ее можно модифицировать под свой вкус и выполнить отоброжение самих кнопок табов на любой вкус. Суть этого метода, что он завязан на исполнении радиокнопок при помощи CSS.
Табы CSS: псевдокласс «:target»
Табы, организованные при помощи CSS таким способом, визуально практически ничем не будут отличаться от первого способа. Вся разница — это техническая организация.
Допустим, мы имеем вот такой HTML-код:
<div class="mytabs">
<div id="mycontent-1">
Информация, содержащаяся в первой вкладке...
</div>
<div id="mycontent-2">
Информация, содержащаяся во второй вкладке...
</div>
<div id="mycontent-3">
Информация, содержащаяся в третьей вкладке...
</div>
<div class="mytabs__links">
<a href="#mycontent-1"> Название первого таба</a>
<a href="#mycontent-2">Название второго таба</a>
<a href="#mycontent-3">Название третьего таба</a>
</div>
</div>
Код CSS будет таким:
.mytabs {
display: flex;
flex-direction: column;
}
.mytabs__links {
display: flex;
width: 950%;
overflow-x: auto;
overflow-y: hidden;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
order: 0;
white-space: nowrap;
background-color: #eee;
border: 2px solid #e3f5fd;
box-shadow: 0 3px 5px 0 #e3f5fd;
}
.mytabs__links>a {
display: inline-block;
text-decoration: none;
padding: 8px 12px;
text-align: center;
color: #d5d5d5;
}
.mytabs__links>a:hover {
background-color: rgba(225, 241, 252, 0.4);
}
.mytabs>#mycontent-1:target~.mytabs__links>a[href="#mycontent-1"],
.mytabs>#mycontent-2:target~.mytabs__links>a[href="#mycontent-2"],
.mytabs>#mycontent-3:target~.mytabs__links>a[href="#mycontent-3"] {
background-color: #bddefb;
cursor: default;
}
.mytabs>div:not(.mytabs__links) {
display: none;
order: 1;
}
.mytabs>div:target {
display: block;
}
Мы надеемся, что механизм работы такого способа организации табов вам понятен. Тут тоже визуально вы можете его оформлять как хотите. Если нужно, можете даже расположить табы вертикально.
Табы на чистом CSS делаются достаточно просто, если понимать, по какому принципу они выстраиваются. Но давайте посмотрим, как исполнить табы, используя возможности JavaScript.
Табы на JavaScript
Многие веб-разрабтчики утверждают, что для таких задач, как табы, лучше использовать CSS, так как таблицы стилей меньше нагружают веб-страницу, а JavaScript лучше использовать для более серьезных задач. Использовать или не использовать JavaScript для табов — это на ваше усмотрение, однако понимать, как их можно организовать было бы неплохо.
Допустим мы имеем вот такой HTML-код:
<div class="mytabs">
<div class="mytabs__nav">
<button class="mytabs__button mytabs__button_active">Название первого таба</button>
<button class="mytabs__button">Название второго таба</button>
<button class="mytabs__button">Название третьего таба</button>
</div>
<div class="mytabs__content">
<div class="mytabs__pane mytabs__pane_show" id="mycontent-1">
Информация, содержащаяся в первом табе...
</div>
<div class="mytabs__pane" id="mycontent-2">
Информация, содержащаяся во втором табе...
</div>
<div class="mytabs__pane" id="mycontent-3">
Информация, содержащаяся в третьем табе...
</div>
</div>
</div>
По логике, после написания HTML-кода должен присутствовать CSS. В данном примере мы не будем его описывать, потому что в нем должно содержаться только визуальное оформление ваших вкладок. Оформить их визуально вы можете самостоятельно. Но давайте посмотрим, каким будет JavaScript-код:
<script>
class ItcTabs {
constructor(target, config) {
const defaultConfig = {};
this._config = Object.assign(defaultConfig, config);
this._elTabs = typeof target === 'string' ? document.querySelector(target) : target;
this._elButtons = this._elTabs.querySelectorAll('.mytabs__button');
this._elPanes = this._elTabs.querySelectorAll('.mytabs__pane');
this._eventShow = new Event('mytab.itc.change');
this._init();
this._events();
}
_init() {
this._elTabs.setAttribute('role', 'tablist');
this._elButtons.forEach((el, index) => {
el.dataset.index = index;
el.setAttribute('role', 'mytab');
this._elPanes[index].setAttribute('role', 'tabpanel');
});
}
show(elLinkTarget) {
const elPaneTarget = this._elPanes[elLinkTarget.dataset.index];
const elLinkActive = this._elTabs.querySelector('.mytabs__btn_active');
const elPaneShow = this._elTabs.querySelector('.mytabs__pane_show');
if (elLinkTarget === elLinkActive) {
return;
}
elLinkActive ? elLinkActive.classList.remove('mytabs__button_active') : null;
elPaneShow ? elPaneShow.classList.remove('mytabs__pane_show') : null;
elLinkTarget.classList.add('mytabs__button_active');
elPaneTarget.classList.add('mytabs__pane_show');
this._elTabs.dispatchEvent(this._eventShow);
elLinkTarget.focus();
}
showByIndex(index) {
const elLinkTarget = this._elButtons[index];
elLinkTarget ? this.show(elLinkTarget) : null;
};
_events() {
this._elTabs.addEventListener('click', (e) => {
const target = e.target.closest('.mytabs__button');
if (target) {
e.preventDefault();
this.show(target);
}
});
</script>
Заключение
Сегодня мы рассмотрели, как можно организовать табы на чистом CSS и при помощи JavaScript. Как видно из статьи, табы на CSS организовать проще и код выглядит немного компактнее, а работать будут безупречно.
JavaScript
