Как сделать вкладки javascript

Узнайте, как создавать пользовательские вкладки и работать с ними с помощью JavaScript. Узнайте, как использовать пример для создания и работы с вкладками.

Создание вкладок на JavaScript

Создание вкладок на JavaScript позволяет пользователям увидеть разнообразные контент на одной странице. Вкладки сделают ваш сайт более привлекательным и легко распознаваемым. Для создания вкладок на JavaScript необходимо писать небольшой код. Пример кода представлен ниже.

let tabButtons = document.querySelectorAll('.tabcontainer .buttoncontainer button');
let tabPanels = document.querySelectorAll('.tabcontainer .tabpanel');

function showPanel(panelIndex, colorCode) {
    tabButtons.forEach(function(node) {
        node.style.backgroundColor = "";
        node.style.color = "";
    });
    tabButtons[panelIndex].style.backgroundColor = colorCode;
    tabButtons[panelIndex].style.color = "white";
    tabPanels.forEach(function(node) {
        node.style.display = "none";
    });
    tabPanels[panelIndex].style.display = "block";
    tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#4286f4');

Данный код используется для того, чтобы скрывать и показывать вкладки. Код имеет следующие части:

• Определение массива кнопок и массива панелей с использованием querySelectorAll.
• Функция showPanel, которая будет вызываться при нажатии на кнопку.
• Вызов функции showPanel при загрузке страници, чтобы показать первую вкладку.

При нажатии на кнопку вызывается функция showPanel. Эта функция изменяет цвет кнопки, показывает нужную панель и изменяет цвет фона панели. Для создания вкладок на JavaScript необходимо писать такой же код для каждой кнопки и панели. Таким образом, пользователи могут легко переключаться между вкладками и получать доступ к нужному контенту.