Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 25.03.2020, 02:53
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Да, как я вам и писал в сообщении №9, что основываться следует на текущем значении URL страницы, нужно найти ссылку, которую нужно «обвести в кружочек», а также ссылку, которая представляет «вкладку».
Ответить с цитированием
  #32 (permalink)  
Старый 25.03.2020, 02:57
Аватар для Mytnyi
Интересующийся
Отправить личное сообщение для Mytnyi Посмотреть профиль Найти все сообщения от Mytnyi
 
Регистрация: 22.03.2020
Сообщений: 16

Malleys, спасибо большое за внимание уделенное теме. Завтра покурю тему, а то на работу.
Ответить с цитированием
  #33 (permalink)  
Старый 25.03.2020, 08:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Malleys
Сообщение от рони
правильно ли я понимаю, что если есть targetLink, то можно поиск categoryLink отменить?
Это нужно для выбора категории, когда нажата ссылка внутри вкладки, или на саму вкладку, или адекватное отображение меню при вводе ссылки, которой нет в меню.
не понимаю как может одновременно быть и targetLink и categoryLink, если в обоих случаях link.href === location.href и обратно, если есть категория, то как выбирается вкладка?
Ответить с цитированием
  #34 (permalink)  
Старый 25.03.2020, 09:23
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
не понимаю как может одновременно быть и 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

Последний раз редактировалось Malleys, 25.03.2020 в 09:36. Причина: Исправил грамматическую ошибку — зачеркнул неправильное слово, а написал правильное слово. Это не вызывает затруднении?
Ответить с цитированием
  #35 (permalink)  
Старый 25.03.2020, 10:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Malleys,
спасибо, сейчас понятно.

как вариант поиск targetLink
Array.prototype.some.call(document.querySelectorAll(".menu > li > a + ul a"), link => {
    if(link.href !== location.href) return false;
    if(targetLink) targetLink.classList.remove("target");
	link.classList.add("target");
	targetLink = link;
    return true
});
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поворот тени элемента в сторону курсора на javascript Miracle5 Общие вопросы Javascript 1 20.03.2018 14:37
Как удолить cookie через javascript shtopor Javascript под браузер 5 22.03.2011 23:10
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
обращение к cookie из JavaScript Atrox Элементы интерфейса 5 24.04.2009 09:29