Показать сообщение отдельно
  #9 (permalink)  
Старый 23.03.2020, 06:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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 страницы, нужно найти ссылку, которую нужно «обвести в кружочек» (если возможно), также ссылку, которая представляет «вкладку» (т. е. текущую категорию, а если не возможно, то состояние по умолчанию — в примере выше это первая попавшая вкладка и подкатегория не выбирается — состояние, которое подходит, если ссылки нет в списке меню)
Ответить с цитированием