Вкладки на HTML, CSS и JavaScript

    Вкладки (табы)

    Вкладки - интерактивный элемент страницы со ссылками, при нажатии на которых происходит переключение между ними.

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

    Телефон будущего. Заставить открыть рот от удивления и заскрежетать зубами от разочарования одновременно.

    Удобный способ оплаты и быстрая доставка

    Процесс создания вкладок

    Для создания вкладок сформируем соответствующие коды HTML, CSS и JavaScript. Обращаем внимание, что владки делаются на "ванильном" javaScript, без использования jquery или других библиотек или фреймворков.

    Шаг 1. Разметка HTML

    
    
    
    

    Шаг 2. Стили CSS

    
    /* Стили класса tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    
    }
    
    /* Стиль кнопок */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }
    
    /* При наведении на кнопку, немного меняем background */
    .tab button:hover {
        background-color: #ddd;
    }
    
    /* Активная кнопка */
    .tab button.active {
        background-color: #ccc;
    }
    
    /* Стиль контента */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
        margin-bottom: 30px;
    } 
    /* Анимация с эффектом появления */
    .tabcontent {
        animation: fadeEffect 1s; 
    }
    
    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
    

    Шаг 3. JavaScript

    
    function openTab(evt, tabName) {
        // Объявление переменных
        var i, tabcontent, tablinks;
    
        // Находим все элементы tabcontent и прячем их
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
    
        // Находим все ссылки с классом "tablinks" и удаляем класс "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
    
        // Показываем текущий таб
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    } 
    
    document.getElementById("defaultOpen").click();
    
    

    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам