Табы на чистом JavaScript. Native Javascript Tabs

[@Дмитрий-г7я7п]

Большое Вам человеческое спасибо! В том числе - за то,что прикрепили ссылку на гитхаб-репозиторий

[@Frontcoder]

Рад, что смог помочь

[@AlexeyArkhipenkoarhis77]

Очень качественный информативный контент. Спасибо за урок!!!

[@sherzodaliyev6427]

👍👍👍

[@Frontcoder]

Рад, что вам понравилось!

[@952a259]

Спасибо Вам за лаконичное решение, профессиональный код и полезный урок! 👍

[@Frontcoder]

Рад, что вам понравилось

[@alexles5003]

Для data атрибутов сейчас есть отдельная конструкция: dataset. Например по данному уроку: доступ к data-tab-name будет происходить this.dataset.tabName. Т.е. в название параметра уходит все что после "data-" Составные имена прописываются кэмелКейсом

[@ЯковКалик]

Спасибо! Реализовал у себя на сайте. Моя благодарность! Успехов!

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@АлексейПотапов-ю5и]

Красава)) Шикарно объяснил)

[@lozovink]

Очень кратко и содержательно! Нет "воды". Респект! +подписка)

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@СашаЛьвович-ж2д]

Спасибо, Анатолий! Методология БЭМ, компонентный подход. Идея изложена красиво и последовательно с толковыми комментариями. Подписался на канал.

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@dmitryck8721]

Нашел то что искал, добавление не по id а по классу, так ка я в js не очень, данное видео мне очень помогло, большое спасибо.

[@rickgrimes7734]

именно то что я искал сегодня!!!и ты выпустил видос,спасибо!!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. рад, что вам нравится! Видос можно было посмотреть на 2 неделе раньше при подписке на патреон. Ссылка в описании

[@rickgrimes7734]

обязательно ознакомлюсь

[@zoyavorobei3737]

Спасибо огромное за видео. Это то, что меня сегодня спасло.

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@rasulali4690]

Спасибо мужик. Все доступно, без воды. Не хватает только какого-то крутого эффекта. Анимации при клике. Было бы вообще пэрсик

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@ОлександрОпенько-ь6м]

Ты хорошо ознакомил с методами classList. я бы добавил к названию видео "методы classList"

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@chocopaay8164]

Спасибо огромное , быстрое и простое объяснение,запихнул к себе в проект

[@elenkarnaeva2458]

Спасибо большое!

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@ericenderson3415]

Благодарствую

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@mykhailo_shokun]

спасибо тебе за контент, я и не знал что JS такой интересный, поинтересней CSS и HTML ))))

[@iventeye]

Топ, спасибо, теперь буду знать как это делать!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@HeaDannn]

если стилизовать табы через , то вместо добавления preventdefault можно изменить ссылку на href="javascript:;" 🙃

[@ilyaponomarev9279]

Побольше бы таких видео

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится.

[@zoyavorobei3737]

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

[@dmitriyivanov9501]

Спасибо. А как адаптировать под мобильные?

[@islomboltaboyev2855]

Большое спасибо!!!!!!!

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@Uncaught_in_promise]

а как добавить эффект анимации (на пример zoomIn) контента по клику?

[@alexles5003]

На display анимация не распространяется. Копать надо по ходу в сторону visibility и height 100%

[@КостяРатюков-к9ъ]

Можно побаловаться с opacity и позиционирование Можно уложиться в 10 строк js

[@sergiystebelskiy2863]

топ, снимай побольше!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. рад, что вам нравится!

[@Kondrashin.Standup]

Спасибо! Дельное видео, все четко и по делу!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@jekakavaltchuk2714]

Круто!

[@Frontcoder]

Рад, что вам понравилось!

[@kuznetsovs]

FrontCoder, подскажите пожалуйста! Если на странице несколько табов как быть? Как сделать чтобы они работали независимо?

[@Frontcoder]

Добрый день. Прогнать все табы в цикле и добавить обработчик на каждый отдельно. Это как один из вариантов

[@stevenson5402]

Спасибо. Было очень интересно

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@1233-n9e]

А как сделать что бы класс is-active убирался у всех при нажатии на крестик?

[@useremail3191]

Здравствуйте, а можете подсказать как добавить таб на котором будет отображаться содержимое всех других табов?

[@ОлегАлбаут]

Никогда не встречал аргументы типа callbackfn, token. Не могли бы объяснить?

[@Frontcoder]

Добрый день. Это Webstorm подставляет просто информационные моменты.

[@АндрейНемобатор]

@@Frontcoder Предупреждать надо, а то я сразу в доки побежал.

[@dushitelsobak8919]

@@АндрейНемобатор твои проблемы, брат, кто виноват в том, что ты тупой?

[@olegchernousov8946]

@@dushitelsobak8919 🤦‍♂️

[@Tuhtarov]

Хороший урок)

[@KeeptheFuckOut]

Если на странице много табов. Для каждого из них нужно писать отдельный код?Или можно продублировать структуру и что то дописать в этот код ?

[@Frontcoder]

Можно дублировать структуру

[@TheTanker1981World]

Uncaught SyntaxError: missing ) after argument list в чем ошибка let tabNav = document.querySelectorAll(selectors:'.tabs-nav__item')

[@Frontcoder]

Пропустили скобку

[@gost1k337]

Не нужно писать в скобках selectors: Это просто подсказки в редакторе автора видео

[@BARMATUN101]

Есть ли вариант оптимизации переключения табов с помощью делегирования событий, event.target? Текущее решение, по идее, не будет работать после добавления табов динамически, либо же придется при этом добавлении опять навешивать обработчики

[@olegonkos]

ну так понятно, что при динамическом добавлении - например контента - нужен уже другой алгоритм.

[@karantin61]

Здравствуйте. Можете показать как сделать ссылку с другой страницы на определенный таб? (Например, на первой странице есть ссылки таб-1, таб-2, таб-3, по клику по ссылке, открывалась страница с табами и на ней должен быть активный соответствующий таб)

[@Frontcoder]

Добрый день. ловить href в урле страницы и js открывать нужную вкладку

[@julia_avsyuk]

Thank you very much! I liked this lection!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится

[@soulteenplay9675]

Привет в если в контенте табов у меня блоки, можешь помочь пожалуйста чтобы каждый из них по очереди исчезал а потом только переключился таб. Как это сделать?

[@WEBSTART-LIVE]

transitionend

[@m.s.5610]

Что-то не работает(не меняется содержимое табов). Вот HTML: Tab 1 Tab 2 Tab 3 Содержание таба 1 Содержание таба 2 Содержание таба 3

[@m.s.5610]

А это JS: let tab = function() { let tabNav = document.querySelectorAll('.tabs-nav__item'), tabContent = document.querySelectorAll('tab'), tabName; tabNav.forEach(item => { item.addEventListener('click', selectTabNav) }); function selectTabNav() { tabNav.forEach(item => { item.classList.remove('is-active'); }); this.classList.add('is-active'); tabName = this.getAttribute('data-tab-name'); selectTabContent(tabName); } function selectTabContent(tabName) { tabContent.forEach(item => { item.classList.contains(tabName) ? item.classList.add('is-active') : item.classList.remove('is-active'); }); } }; tab();

[@Xudojnik_NAG]

у меня не сработало ничего не переключается

[@neikterneikter8719]

А что за плагин с подсветкой вложенности?

[@Frontcoder]

Никакого плагина нет. Просто редактор Webstorm

[@mushnikov35]

Будет ли по angular темки ? )

[@Frontcoder]

Скорее всего да

[@mushnikov35]

@@Frontcoder окей

[@ЕгорЕгорович-д2т]

Я нихера не понял но подача супер!

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!