Главная » Программирование » Вкладки (Табы) на JavaScript

Вкладки (Табы) на JavaScript

    Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.

    Вариант вкладок на чистом Javascript

    Решение 1. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1.

    Пример №1: Табы на чистом JS
    HTML
    CSS
    JavaScript
    <div id="tabs-block"> <div id="tabs">
    <div class="item active" id="item-1">HTML</div>
    <div class="item" id="item-2">CSS</div>
    <div class="item" id="item-3">JavaScript</div>
    </div>
    <div class="tabs-content">
    <div class="item-content active" id="item-1-content">Код HTML</div>
    <div class="item-content" id="item-2-content">Код CSS</div>
    <div class="item-content" id="item-3-content">Код JavaScript</div>
    </div>
    </div>
    .item {
    display: inline-block;
    padding: 10px;
    margin: 2px;
    }
    .item:hover { cursor: pointer; }
    .item.active { background: #ffe42369; }
    .item, .tabs-content {
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    }
    .tabs-content {
    padding: 1rem;
    min-width: 320px;}
    .item-content {
    height: 0;
    transition: .4s;
    opacity: 0;
    }
    .item-content.active {
    height: auto;
    opacity: 1; }
    /* Табы */
    document.addEventListener('DOMContentLoaded', clickTabs());
    function clickTabs() {
    var tabs = document.querySelector('#tabs');
    var item = document.querySelectorAll('.item');
    var itemContent = document.querySelectorAll('.item-content');
    tabs.addEventListener("click", function (event) {
    if (event.target.classList == 'item'){
    for ( let i = 0; i < item.length; i++ ){
    item[i].classList.remove('active');
    itemContent[i].classList.remove('active');
    }
    event.target.classList.add('active');
    let idItemContent = event.target.id + '-content';
    let iC = document.getElementById(idItemContent);
    iC.classList.add('active');
    }
    });
    }
    Код №1: Вкладки на чистом JavaScript

    Примеры вкладок на JavaScript: Подборка

    See the Pen
    CSS TABS
    by Ramnek Singh (@Ramnk7)
    on CodePen.

    Пример 2.1: Красивые вкладки-меню для мобильных на JS

    See the Pen
    Expanding flex cards
    by Zed Dash (@z-)
    on CodePen.

    Пример 2.2: Расширяющиеся гибкие карты на jQuery


    See the Pen
    Tabs [JavaScript]
    by Huong (@huongbt)
    on CodePen.

    Пример 2.3: Простые табы на Javascript

    See the Pen
    Tabs javascript
    by Jessica Aiskel (@myjessijess)
    on CodePen.

    Пример 2.4: Табы в классическом стиле на Javascript

    See the Pen
    Multiple Tabs Javascript
    by Trevor Bradley (@trevor3999)
    on CodePen.

    Пример 2.5: Несколько вкладок на JS

    See the Pen
    tabs / JavaScript
    by Ed (@livehighvu06)
    on CodePen.

    Пример 2.6: Несколько тобов на JS

    See the Pen
    Beautiful Tabs System with JS
    by AJAY KARAN SHARMA (@Ajaykaransharma)
    on CodePen.

    Пример 2.7: Выпадающие табы на Javascript
    0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

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

    0 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии