В этом уроке мы научимся создавать вкладки при помощи JavaScript.
Начинаем всегда с html-разметки. Вот так это будет выглядеть:
В данном случае у нас будет всего три вкладки (но при желании можно сделать больше). Изначально вкладки и контент вкладок не связаны между собой, это можно сделать с помощью js-кода. Однако прежде чем перейти к js нужно разобраться с css.
Вот какие стили использовал я для своего сайта:
При желании можно добавить несколько стилей, например, для формата и размера текста, отступов и т.д.
При загрузке страницы выполняется следующий js-код:
где мы получаем массив всех вкладок и заключенного в них контента (т.е. грубо говоря всего что у нас есть).
Функция hideTabsContent, скрывающая содержимое вкладок, запускает цикл от параметра, который указывается при вызове функции до окончания массива tabContent. После чего каждому элементу tabContent удаляется класс show, прибавляется класс hide, удаляется класс отвечающий за активную вкладку whiteborder (самая первая вкладка).
Клик мышью по заголовку вкладки обрабатывается при помощи функции:
Здесь отслеживаются все клики происходящие внутри области имеющей id=«tabs». Если данный элемент имеет class=«tab» то запускается цикл, назначение которого выяснить индекс элемента, на котором совершили клик мышью в массиве tab.
Осталось рассмотреть функцию showTabsContent:
В первой строке, мы проверяем наличие у блока по которому совершили клик класса hide, при наличии данного класса вызывается функция hideTabsContent, которая скрывает все блоки вкладок. Затем, активной вкладке добавляется класс whiteborder, удаляется класс hide и добавляется класс show.
В готовом варианте это может выглядеть вот так:
#программирование #программированиедляначинающих #javascript #учеба
Спасибо за внимание!
Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал🙂
Также рекомендую подписаться на мой YouTube и Telegram. Там я выкладываю контент, которого нет в Дзене😉