Сообщение от рони
|
не понимаю как может одновременно быть и targetLink и categoryLink, если в обоих случаях link.href === location.href и обратно, если есть категория, то как выбирается вкладка?
|
let categoryLink, targetLink;
Array.prototype.filter.call(document.querySelectorAll(".menu > li > a + ul a"), link => link.href === location.href).slice(0, 1).forEach(link => {
if(targetLink) targetLink.classList.remove("target");
link.classList.add("target");
targetLink = link;
});
categoryLink = Array.prototype.find.call(document.querySelectorAll(".menu > li > a"), link => link.href === location.href);
categoryLink = targetLink ? targetLink.closest(".menu > li").querySelector("a") : categoryLink ? categoryLink : document.querySelector(".menu > li > a");
categoryLink.classList.add("active");
Среди всех ссылок, которые находятся
под вкладками ищется та, которая указывает на текущую страницу, на такую найденную ссылку добавляется класс target (чтобы добавить эффект «обводка»). Такая ссылка есть не всегда, например, если нажали на саму вкладку, то конечно же такой ссылки не будет. Это и есть
targetLink.
Находим
на самих вкладках такую ссылку, адрес которой совпадает с текущим адресом страницы
(если есть). А если нет, то определяется ссылка на ту вкладку, к какой категории относится текущая страница. На такую найденную ссылку добавляется класс active (чтобы добавить эффект «выбранная вкладка»). Это и есть
categoryLink.
Вот я оставил только то, что имеет отношение к меню (с самыми нужными стилями), чтобы вы поняли принцип работы
скрипа скрипта, а то получается вы не поняли, как устроены эти вкладки...
https://plnkr.co/edit/YfEV8VisWdKF8Y...ipt.js&preview