1. Получение элементов со страницы
В строчках с 1-3 получаем элементы со страницы, а конкретно из DOM дерева. DOM дерево - это все HTML теги, представленные в виде обычных JS объектов.
В первой строчке обращаемся к глобальному объекту document и вызываем у него метод querySelectorAll('. '). Аргументом данный метод принимает селектор элемента, который мы прописываем как и в css, через точку и используем ' '. Метод querySelectorAll('. ') вернет нам псевдомассив, который содержит все элементы, имеющие данный селектор. Каждый элемент - это блок с табом (кнопкой), на которую мы будем нажимать. Каждый элемент в псевдомассиве является обычным объектом. Этот псевдомассив мы присваиваем в переменную tabs.
То же самое происходит во второй строчке и в переменной tabsContent хранится псевдомассив с контентом, который необходимо отображать при кликах на табы .
В третьей строчке используется метод querySelector('. '). Он в отличие от querySelectorAll('. ') возвращает один элемент с данным селектором. В переменную tabsParent мы присвоили блок, внутри которого лежат все табы. В tabsParent у нас блок-обертка с другими блоками.
2. Функция, которая скрывает контент
В пятой строчке создаем функцию hideTabContent() {код}. Эта функция не будет работать и проигнорируется кодом пока мы ее не вызовем в строчке 20. В теле функции в {}, в 6 строчке мы обращаемся к псевдомассиву tabsContent и вызываем у него метод forEach.
Как работает forEach()? Этот метод перебирает массив и применяет функцию,которая указана как аргумент, на каждом элементе.
tabsContent.forEach(() => {})
массив.forEach(тут мы пишем функцию которая будет срабатывать на каждом перебранном элементе)
Дословно: для каждого элемента примени функцию.
forEach() принимает в себя 3 аргумента:
- 1й по порядку, всегда сам элемент из массива, который обрабатывается,
- 2й всегда порядковый номер перебранного элемента в массиве,
- 3й сам массив.
forEach((элемент, номер, массив) => {})
Мы объявляем эти аргументы, чтобы потом, где-то, в функции их использовать.
Названия аргументам можно давать произвольные.
Теперь разбираем функцию в forEach.
Запись forEach( item => {какой-то код}) равна записи:
forEach( (item) => {какой-то код}) и равна записи:
forEach(function(item) = {какой-то код})
В 6 строчке мы объявляем первый аргумент в функции item, он будет хранить в себе обрабатываемый элемент из псевдомассива. В теле функции, в 7 строчке обращаемся к item и вызываем у него свойство style, которое отвечает за css стили. В стилях обращаемся к css свойству display и присваиваем ему значение 'none'. На каждой итерации цикла forEach item содержит определенный элемент. Итерация - обработка одного элемента псевдомассива. На 1 первой итерации цикла в item лежит первый элемент псевдомассива и на этом элементе работает код из 7 строчки. На 2 итерации цикла forEach в item лежит второй элемент псевдомассива и на нем тоже применяется строчка 7 и тд.
На десятой строчке обращаемся к псевдомассиву tabs, вызываем у него метод forEach, который его переберёт. Аргументом в функции в forEach объявляем item. В строчке 11, в теле функции обращаемся к item на каждой итерации цикла, обращаемся к свойству classList, которое хранит в себе css селекторы, и вызываем метод remove() который удаляет селектору элемента. Его аргумент - селектор, который необходимо удалить. Селектор указанный в 11 строчке отвечает за то, что при нажатии на таб, он закрашивается в другой цвет или подчеркивается, в зависимости от того, что вы укажете в css свойствах.
3. Функция, которая показывает контент.
На 15 строчке создаем функцию showTabContent(){}.
В аргументе функции запись i = 0 значит:
если вызывать функцию и не передавать в нее аргумент showTabContent(); то функция будет работать с аргументом равному 0.
Запись (i = что- то) устанавливает аргумент по умолчанию.
В других случаях типа showTabContent(1) или showTabContent(346), функция будет работать с заданным параметром 1 или 346.
В 16 строчке, в записи tabsContent[i] vs обращаемся к элементу псевдомассива tabsContent под номером i. Если i будет равно 1, то в tabsContent[i] вместо i подставится 1 и мы получим запись tabsContent[1], которая возвращает 1-й элемент из псевдомассива.
Если i будет равно 2, то в tabsContent[i] вместо i подставится 2 и мы получим запись tabsContent[2], которая возвращает 2-й элемент из псевдомассива.
Запись tabsContent[i].style.display = 'block';
равна
элемент.style.display = 'block';
В 16 строчке мы обращаемся к свойству style у элемента псевдомассива (tabsContent[i]) и устанавливаем у css свойства display значение 'block'.
В 17 строчке, в записи tabs[i], обращаемся к элементу псевдомассива tabs под номером i. У этого элемента обращаемся к свойству classList и вызываем у него метод add(), который добавляет элементу селектор, указанный аргументом.
3. Вызываем функции
В 20 и 21 первой строчке мы вызываем обе функции. Обязательно сначала вызываем функцию скрывающую контент со страницы, а потом функцию показывающую контент. И так как в функции showTabContent есть аргумент по умолчанию, который равен 0, showTabContent отобразит на экране первый элемент с контентом и отметит первый таб, как активный.