Mytnyi,
let categoryLink, targetLink;
// среди всех ссылок, которые находятся под вкладками ищется та, которая указывает на текущую страницу,
// на такую найденную ссылку добавляется класс target (чтобы добавить эффект «обводка»)
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");
// на такую найденную ссылку добавляется класс active (чтобы добавить эффект «выбранная вкладка»)
categoryLink.classList.add("active");
Здесь выполняются
две задачи — обводится в кружочек ссылка, на которую перешли, и показывается та вкладка, где эта обведённая ссылка находится.
Рабочий пример можно посмотреть тут —
https://charm-launch.glitch.me/h/ (код можно смотреть через консоль разработчика в браузере (Ctrl+Shift+I или F12), или только исходный код страницы (Ctrl+U)
Сообщение от Mytnyi
|
Процесс должен происходит по средствам cookie
|
И как он сможет произойти, если например ссылка была отправлена кому-то? Правильней сказать так — «Процесс должен происходить при помощи URL». Т. е. основываясь на текущем значении URL страницы, нужно найти ссылку, которую нужно «обвести в кружочек» (если возможно), также ссылку, которая представляет «вкладку» (т. е. текущую категорию, а если не возможно, то состояние по умолчанию — в примере выше это первая попавшая вкладка и подкатегория не выбирается — состояние, которое подходит, если ссылки нет в списке меню)