Выполняем реальный проект на JavaScript | ч.2 - Табы

В этом ролике мы продолжаем работу над проектом. Сегодня займемся созданием одного из самых частых элементов на страницах - табов. Если не смотрели первую часть - то лучше начать с неё.

================================

Ссылки:

[iventeye]

Очень круто, что вы делаете такие ролики по JS, т.к на ютубе мало таких уроков, либо они уже устаревшие. С вами очень приятно изучать JavaScript. Спасибо!

[Dini-bambini]

Как всегда, на высоте ))). Спасибо за труды, Иван! )))

[viper_vlad]

Использовать classList.contains() для проверки на соответствие элемента по селектору как-то странно. Потому что аргумент функции задан как tabSelector, а селектор, все-таки, это не просто точка и название класса. Селектором может быть ID, может быть класс, может быть тэг, а может быть все вместе. Ты сам передаешь в качестве contentSelector составной селектор. А теперь представь, что сторонний программист будет работать над твоим кодом и, увидев в подсказке название аргумента + увидев, что ты в схожий аргумент передаешь составной селектор, сделает тоже самое и для селектора таба. И что тогда получится? Ошибка. Поэтому нужно либо менять аргумент на tabClassName, либо для проверки использовать не classList.contains(), а функцию matches().
Здесь же идет проверка на соответствие родительского элемента. Только есть одно НО — твоя проверка учитывает вложенность не более одного уровня. То есть если внутри таба будет див, а внутри этого дива будет другой див, то клик по последнему диву не будет вызывать никаких действий, т.к. его родительский элемент не содержит класс, который должен содержать таб. Вместо этого тебе нужно использовать функцию closest(), которая перебирает все родительские элементы и проверяет их на переданный тобой селектор
Регулярка, кстати, не нужна здесь. Есть более простая реализация в виде ф-ции substring. В нее просто передаешь единицу и получаешь ту же самую строку без точки вначале

[РоманВаськов-фх]

Мне новичку самое то что нужно для практики. Спасибо, Иван.

[videorock_ai]

Круто!Спасибо, с нетерпением жду следующую часть

[paul_brain]

Однозначно лайк! Благодарю за видео! :)

[МарияВасиленко-як]

Спасибо за урок! Чет только запуталась какие именно классы в функцию закидывать. Надо потом еще пересмотреть)

[АлексейБалакирев-юо]

в 1-ом табе class active добавляется к блоку, на который ни как не влияет..там его надо к ссылке добавлять внутри блока это в тз нарисовано

[Dima]

не могу понять почему не работает анимация на сайте? через нпм установили же jquery, animate css подключен и классы все прописаны, но не работает. подключив вручную jquery и wow js все заработало, думал что установлю wow js через npm и будет ок, но увы все также без движения

[maxzhukov]

Знаешь в чем минус, ты не проверяешь по ходу все ли работает, а проверяешь только в конце и если смотреть, то потом в конце приходится искать в куче строк где же ошибка

[serhiigerkhard]

Спасибо за урок! Универсальные решения - просто огонь! Не понял только почему мы в main.js передаем аргументы для табов, почему не сделали по аналогии с модальными в самой функции tabs? И подскажи плиз по поводу проверки на наличие самого target в обработчике события, что это могут быть за элементы, которые не поддерживают события клика - конкретный пример?

[ЛеонидБорисов-чх]

Спасибо огромное, если можно вопрос, зачем блок с отделкой балкона делать слайдером, нельзя просто с помощью якорных ссылок сделать или это типа понты, что мы тоже классно вестаем

[fedy_]

Зачем так напрягаться?
1. target.classList.contains(tabSelector.replace(/\./, '')) === target.matches(tabSelector)
2. tab.forEach((item, i) => {

if (target == item || target.parentNode == item) {
hideTabContent();
showTabContent(i);
}
})
===
hideTabContent();
=> target === el || target.parentNode === el))

[olegplahotniy]

А зачем все это писать вручную когда есть Бутстрап?