Загрузка...

Как создать ФИЛЬТРАЦИЮ на сайте за 5 минут [HTML, CSS, JS] ссылка в описании

В этом ролике подробно разберем как самостоятельно создать фильтрацию карточек или любых других элементов на сайте буквально за 5 минут.
============================================
Ссылка на пример из этого видео:
https://codepen.io/inteltone/pen/PoMpaER
============================================
Главное:
1. Для скрытия и показа карточек используется класс hidden
2. Для визуального выделения кнопки с названием бренда используется класс current
3. При нажатии на кнопку вызывается функция, которая сначала скрывает все карточки и деактивирует кнопки. Затем показывает только те карточки, значение атрибута data-brand которых, соответствует тому же значению, что и у кнопки на которой кликнули.
Вот и все что нужно знать, чтобы создать на сайте простую, но эффективную фильтрацию.
========================================
🏆 ПРЕДЛАГАЮ УСЛУГИ :::
✅ профессиональная адаптивная кроссбраузерная верстка веб-сайтов (HTML5, CSS3, Flexbox, Grid, Vue 3, Nuxt 3, Vite, Gulp)
✅ анимирование элементов на страницах веб-сайта (GSAP, Adobe Animate)
✅ фронтенд программирование на Javascript
✅ посадка верстки на CMS WordPress

==========================================
⚽ ИНДИВИДУАЛЬНО ОБУЧАЮ ОНЛАЙН :::
✅ кроссбраузерной адаптивной верстке
✅ работе с JS-библиотекой GSAP (веб-анимация)
✅ работе в программе Adobe Animate

Связаться со мной можно по email, который указан на Главной странице этого канала. Перейти можно по ссылке ниже:
https://www.youtube.com/channel/@inteltone

💌 СОЦИАЛЬНЫЕ СЕТИ :::
ТЕЛЕГРАМ: @inteltone
https://vk.com/pro_front_end

Видео Как создать ФИЛЬТРАЦИЮ на сайте за 5 минут [HTML, CSS, JS] ссылка в описании канала ПРО ФРОНТЕНД
Страницу в закладки Мои закладки
Все заметки Новая заметка Страницу в заметки

На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.

Об использовании CookiesПринять