В какую сторону двигаться? Cookie (Javascript)
 

Уважаемые доны. Прошу направить меня в нужную степь и по возможности подсказать как действовать.

Идея такова: имеется шапка с двумя блоками (серый и синий). Когда пользователь заходит на сайт вкладка "Частным лицам" по умолчанию активна (на картинке_1 это видно) и пользователь может переходить по ссылкам в синей части, таким как: "Каталог", "Услуг и цены", "Межгород" и т.д. При этом вкладка "Частным лицам" остается активной. А когда Пользователь нажимает на ссылку "Юридическим лицам", то вкладка "Юридическим лицам" должна становится активной и пользователь может переходить по другим ссылкам меню в синей части (картинка_2), а вкладка "Юридическим лицам" должна оставаться активной. Все это должно реализовываться с помощью cookie. Собственно как должны меняться ссылки в синей части меню это соображу. А вот в остальном задачу не соображу как реализовать.

Многое зависит от того, какими механизмами Вы пользуетесь
Если при каждом выборе в меню идет обращение к серверу, который генерит страницу, это одно. Пусть он ее и генерит всю, в зависимости от ссылки вместе с меню.
А если вы загружаете сразу весь возможный контент (для всего меню), то при нажатии пункта меню должен становится видимым тот блок, который к нему относится, а остальные гаситься.

voraa,
Процесс должен происходит по средствам cookie

Mytnyi,
Открывашка 253 с запоминаем открытой вкладки

Спасибо. Но проблема нерешилась. После нажатия на юрлица пользователь переходит на другу ссылку, а вкладка юрлица должна быть активна. а в приведенном вами примере пользователь остается на одной странице.

Сорри, но какой в этом смысл?
Зачем заставлять пользователя возвращаться на то место, с которого он ушел? Это не роман, который читают последовательно. Это сайт с разнообразной информацией. Человек что то посмотрел, что то ему показалось интересным, он посмотрел еще пару пунктов меню, не нашел ничего важного и ушел. И зачем следующий раз возвращать его туда же?
Представьте, что так поступал бы какой-нибудь сайт типа mdn, или википедии?.
Пусть человек положит интересующее его место в закладку.

Попробую объяснить. Вкладки(ссылки) Физическим лицам и юридическим лицам - разные, под ними меню второго уровня тоже с разными ссылками. Человек переходит с вкладки Физические лица на вкладку Юридические лица и у него не только меняется меню второго уровня, но он и сам переходит на другу страницу site.ru/yurliucam/


Суть вся в том что и во вкладах Физические лица и Юридические лица в меню второго уровня попадаются одинаковые ссылки, например, такие как: "Контакты".


И еще весь этот блок хедара у меня подключен на все страницы через:

<?php
include_once "head.php";
?>

то есть, все ссылки, классы и тп. не поменять.

могу пожелать только удачи, возможно кто-то подскажет решение, сам я не понимаю о чём вы пишите и что вам нужно.

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)

И как он сможет произойти, если например ссылка была отправлена кому-то? Правильней сказать так — «Процесс должен происходить при помощи URL». Т. е. основываясь на текущем значении URL страницы, нужно найти ссылку, которую нужно «обвести в кружочек» (если возможно), также ссылку, которая представляет «вкладку» (т. е. текущую категорию, а если не возможно, то состояние по умолчанию — в примере выше это первая попавшая вкладка и подкатегория не выбирается — состояние, которое подходит, если ссылки нет в списке меню)

А я еще раз спрашиваю, как организовано взаимодействие с сервером?
При переходе с вкладки на вкладку и на каждый пункт на сервере меню полностью генерится новая страница?
А как генерится нужный хедар? Он тоже зависит от куков?
Но это не совсем правильно. Как уже писал Malleys, невозможно будет запомнить ссылку на страницу или отослать ее кому то, т.к. нужных куков не будет.
Здесь нужно использовать адреса
Например
site.ru?tab=yur&men=doc
site.ru?tab=phys&men=cat

Это и на сервере разобрать можно (get запросы) и браузер разберет, если нужно (url.search)

Malleys,
пост #9
правильно ли я понимаю, что если есть targetLink, то можно поиск categoryLink отменить?

Спасибо большое за труды. Но зачем плодить так много ссылок? И если я буду плодить, по вашему примеру, так много ссылок, то в случае если мне необходимо заменить или поменять порядок ссылок в синем меню, да и вообще само меню, то мне необходимо заходить в код каждой страницы и актуализировть информацию. Что бы этого избежать я просто подключаю к странице файл head.php и меняю только его. А так же некоторые (даже большинство) ссылки второго уровня во вкладке ЧЛ, такие же как и во вкладке ЮЛ. То есть например я захожу из вкладки ЧЛ по ссылке в "Контакты" - у меня должна быть активна ссылка ЧЛ. А если я захожу из вкладки ЮЛ по ссылке в "Контакты" - у меня должна быть активна ссылка ЮЛ.

Вот и ломаю голову как это реализовать и с помощью чего.

Нет ничего не генерируется. хедер не меняется, он просто подключается ко всем страницам.

Что значит плодить ссылки? В примере все разные ссылки...

Меню можно изменять в одном месте (конкретно у меня — это файл header.html), а то, что вы видите в примере — это один и тот же файл, который возвращается сервером при запросах вида https://charm-launch.glitch.me/h/тут-можно-написать-всё-что-угодно-для-примера

В чём проблема, если вы пишете, что у вас ничего не генерируется, header не меняется, он просто подключается ко всем страницам? У меня пример основан именно на этом принципе.

Пример, который я вам привёл, именно так и работает.

https://example.com/частным-клиентам/контакты и https://example.com/юридическим-клиентам/контакты ссылаются на один и тот же файл, однако части в URL «/частным-клиентам/» или «/юридическим-клиентам/» нужны, чтобы понять к какой категории относятся ссылки, что именно подсвечивать... Как вы и пишете «то есть, например, я захожу из вкладки ЧЛ по ссылке в "Контакты" — у меня должна быть активна ссылка ЧЛ. А если я захожу из вкладки ЮЛ по ссылке в "Контакты" — у меня должна быть активна ссылка ЮЛ.»

Путь к ссылке «Контакты» должен быть одинаков и из ЮЛ и из ФЗ

Какой тогда смысл их разносить по разным вкладкам?

Вот вы перешли во вкладку ЮЛ, перешли на https://example.com/юридическим-клиентам/контакты По такой ссылке всегда можно восстановить, что это «контакты» из ЮЛ.

А если у вас там будет https://example.com/контакты, которое встречается и в ФЗ и в ЮЛ, то однозначно нельзя сказать, к какой категории относится ссылка. Код, который я вам привел, это тоже учитывает — выбирает первую попавшую категорию, в которой есть эта ссылка.

Это нужно для выбора категории, когда нажата ссылка внутри вкладки, или на саму вкладку, или адекватное отображение меню при вводе ссылки, которой нет в меню.

Я не понимаю, почему вам запрещено работать с ссылками типа https://example.com/частным-клиентам/контакты и https://example.com/юридическим-клиентам/контакты по которым сразу понятно, что к чему относится! Может вы не знаете про .htaccess или нечто подобное, и думаете, что это про «размножение макарон»?

Может стоит подумать про отдельное меню, в котором будут общие ссылки?

Смысл в том, что бы как раз таки не плодить "макароны".

Выборка категории не нужна.

Опять же, задача не стоИт плодить макарон.

Просто нужно запоминать на какой вкладке находится пользователь, на ЧЛ или на ЮЛ.

Скажите, пожалуйста, какое имеет значение ваш пост ниже из другой темы? Разве наш любимый браузер Google Chrome как то влияет на работу скриптов? или то что мы тестируем локально тоже влияет на работу кода?

Тестирую на OS если что.

Потом встанут задачи, как обеспечить правильное сохранение ссылки и корректная работа кнопок назад/вперед в браузере.

считайте, что я ошибочно понял вашу проблему, как запоминание открытой вкладки, не обращайте внимания.

Имеются еще предложения?

Mytnyi,
возможно задачу нужно переформулировать, раз предложенные советы не подходят для решения вашей проблемы.

Да, скорее всего.

Вот две вкладки(табы верхнего меню). они подключаются ко всем страницам. При клике на какую-то из вкладок, она становится активной(не важно какая стилистика). просто ей присваивается класс.

<a class="header_tabs_i __active" href="/" data-tab="nav-fz" style="text-decoration: none">
                        <div class="header_tabs_invert-radius __left">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10"><path class="cls-1" d="M615,13449a10.015,10.015,0,0,0,10-10v10H615Z" transform="translate(-615 -13439)"></path>
                            </svg>
                        </div>
                        <div class="header_tabs_invert-radius __right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10"><path class="st0" d="M0,0c0,5.5,4.5,10,10,10H0V0z"></path></svg>
                        </div>
                        <span class="visible-lg-block visible-md-block">Физическим лицам</span> <span class="hidden-lg hidden-md">Физ. лицам</span>
                    </a>
                    <a class="header_tabs_i" href="/juridicheskim-licam" data-tab="nav-ur" style="text-decoration: none">
                        <div class="header_tabs_invert-radius __left"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10"><path class="cls-1" d="M615,13449a10.015,10.015,0,0,0,10-10v10H615Z" transform="translate(-615 -13439)"></path></svg>
                        </div>
                        <div class="header_tabs_invert-radius __right"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10"><path class="st0" d="M0,0c0,5.5,4.5,10,10,10H0V0z"></path></svg>
                        </div>
                        <span class="visible-lg-block visible-md-block">Юридическим лицам</span>
                        <span class="hidden-lg hidden-md">Юр. лицам</span>
                    </a>

У каждой из этих двух вкладок имеется разные:
href = /ссылка1/ , data-tab="nav-ur" и href = / ссылка2/ , data-tab="nav-fz".

Хочется сделать функцию что бы при клике на вкладку записывался определенный cookie, со значением data-tab и потом при дальнейшем переходе по этому клику этот cookie использовался для добавления класса вкладке.

Я хз как еще объяснить. Правда. Вроде алгоритм действий объяснил. Может я просто не владею такими способностями объяснять и это не моё. Тогда придется месяц колупаться.
Прошу знающих подключиться.

Зачем вам data-tab, если у ссылки есть href, который можно сравнить с текущим адресом страницы. А cookie обычно должен присылать сервер, а для хранения настроек используйте localStorage, который вам в этом примере не нужен, вам ведь не нужны проблемы с навигацией...

Ага. и потом крутить вертеть ключи как хочу. Правильно? Пошел курить...

Покурил.
Не получиться так. Не получиться сравнивать. Я же перехожу по другим ссылкам второго ряда.

URL – однозначно определяет ресурс, а то, что вы задумали — не обращать внимание на URL, приведёт к тому, что когда вы выберете «Частным лицам», а затем «Контакты», а затем «Юридическим лицам», а затем «Контакты», а затем в истории нажмёте переход на две страницы назад, то вы попадёте не в Частным лицам » Контакты, а в Юридическим лицам » Контакты, потому что cookie или localStorage.

А если поделиться такой ссылкой, то она не сможет узнать какую вкладку подсвечивать, посколько нет тех же cookie или localStorage.

А то, что я вам предлагаю, а именно — основываться на значении URL — хорошая практика, поскольку никаких неоднозначностей не возникает.

Вот смотри, перешёл в своём примере по Юридическим лицам » Контакты, скопировал адрес из адресной строки — https://charm-launch.glitch.me/h/юридическим-лицам/контакты, и ты видишь тот же самый раздел, а с cookie или localStorage так не получится (мы же не будем говорить о глобальных, всемирных cookie или localStorage, потому что для этого и есть URL)

Конечно тогда будет не оператор ===, а сравнение частей путей (например, при помощи метода startsWith у строки)

Malleys, я понял вас. вы мне в общем предлагаете сделать два разных хэдера. Об этом я думал еще в самом начале. Но так проще всего. Но только мне не нужно делиться ссылками. Даже если когда я выберу «Частным лицам», а затем «Контакты», а затем «Юридическим лицам», а затем «Контакты» и поделюсь этой ссылкой, то пусть другой юзер и заходит на «Частным лицам»-«Контакты».

Ладно попробую побиться в ворота рогами, просто теперь уже интересно как все таки использовать cokkie в нужном русле. Должен же я понимать эту тему) не получиться, сделаю со вторым хэдером.

Я такого не предлагал, я предлагал основываться на URL, в зависимости от его значения подсвечивается нужная вкладка и ссылка в одной и той же шапке сайта. Запомните — только один <header>! Интригующе, правда?

Такое не нужно и ещё более сложней (чем просто добавить класс в зависимости от значения URL, чтобы подсветить нужную вкладку и ссылку)

Я вам уже объяснял, почему вам такое не нужно!

Header [ˈhɛɾɚ] — это вам не «хэдер»!

Конечно!:blink:

По этому пути двигаться?


Буду по английски лучше писать, на будущее)

Да, как я вам и писал в сообщении №9, что основываться следует на текущем значении URL страницы, нужно найти ссылку, которую нужно «обвести в кружочек», а также ссылку, которая представляет «вкладку».

Malleys, спасибо большое за внимание уделенное теме. Завтра покурю тему, а то на работу.

не понимаю как может одновременно быть и 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,
спасибо, сейчас понятно.
:thanks:
как вариант поиск 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
});