Кароче
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const tabsWraps = document.querySelectorAll('.tabs'); tabsWraps.forEach(currentTabsWrap => { const Tabs = currentTabsWrap.querySelectorAll('.js-tab-links__link'); const Panes = currentTabsWrap.querySelectorAll('.tabs-content__item'); Tabs.forEach(tab => tab.addEventListener('click', e => { const index = Array.from(Tabs).indexOf(tab); Tabs.forEach(el => el.classList.remove("is-active")); Panes.forEach(el => el.classList.remove("is-active")); tab.classList.add('is-active'); Panes[index].classList.add('is-active'); e.preventDefault(); })); }); |
Подробнее
На многих веб-сайтах существует потребность в создании разделов с вкладками, которые позволяют пользователю переключаться между разными видами контента, не загружая каждый раз новую страницу. Это можно легко реализовать с помощью JavaScript.
Код выше представляет собой простую реализацию такой функциональности. Он начинается с выбора всех элементов с классом “tabs”. Это позволяет нам использовать этот код для нескольких блоков вкладок на одной странице.
Затем мы итерируем по каждому блоку вкладок и выбираем все ссылки и панели внутри этого блока. Ссылки обычно используются для переключения между вкладками, а панели содержат контент, который будет отображаться при выборе определенной вкладки.
Далее мы добавляем слушателя событий на каждую ссылку. Когда пользователь кликает по ссылке, событие срабатывает, и мы определяем индекс выбранной вкладки. Мы затем удаляем класс “is-active” у всех ссылок и панелей, чтобы скрыть текущий контент, и добавляем этот класс только к выбранной вкладке и соответствующей ей панели.
Важно отметить, что мы также вызываем e.preventDefault();, чтобы предотвратить стандартное поведение ссылки, которое заключается в переходе по URL. Вместо этого мы управляем отображением контента средствами JavaScript.
Этот код можно легко адаптировать и настроить под ваши потребности. Он предоставляет базовую структуру для создания вкладок на вашей веб-странице и может быть расширен с использованием CSS для стилизации и улучшения пользовательского опыта.
