Добавить класс родителю активной ссылки при наличии GET Запроса в URL [Архив форума]

Просмотр полной версии : Добавить класс родителю активной ссылки при наличии GET Запроса в URL

firsmember

12.05.2022, 11:08

Всех приветствую!
Есть самописный фильтр в виде 2х меню, в ссылках которых гет запросы, 1 меню на фильтрацию по году, 2е меню на фильтрацию по номеру месяца.
Хочу подсветить родителя активной ссылки если в URL есть соответствующий GET запрос...
Структура меню следующая

<ul class="news-nav-list">
<li><a href="?y=2022&еще всякие запросы">2022</a></li>
<li><a href="?y=2021&еще всякие запросы">2021</a></li>
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и т.д.
</ul>

<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09">Сентябрь</a></li>
и т.д.
</ul>

А хочу например если выбран сентябрь 2021 года, что бы было

<ul class="news-nav-list">
<li><a href="?y=2022&еще всякие запросы">2022</a></li>
<li class="current-menu-item"><a href="?y=2021&еще всякие запросы">2021</a></li>
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и т.д.
</ul>

<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li class="current-menu-item"><a href="?всякие запросы&m=09">Сентябрь</a></li>
и т.д.
</ul>

Заранее премного благодарен за помощь.. !

voraa

12.05.2022, 11:38

А что происходит при нажатии на ссылку?
Переход на другую страницу или обновление этой?

firsmember

13.05.2022, 19:06

Обновление этой

рони

13.05.2022, 19:22

firsmember,
http://javascript.ru/forum/misc/38520-vozmozhno-li-takoe-na-javascript.html

firsmember

14.05.2022, 10:06

firsmember,
http://javascript.ru/forum/misc/38520-vozmozhno-li-takoe-na-javascript.html

По ссылке спрашивают о страницах, а, как отдельные ссылки связаны с GET Запросами?
Не понимаю

рони

14.05.2022, 10:32

firsmember,
:-?

рони

14.05.2022, 22:47

firsmember,
по ссылке выше с десяток вариантов выделения активной ссылки, ниже один из них, применительно к вашему html.
<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current-menu-item a{
color: red;
}
</style>
</head>

<body>
<ul class="news-nav-list">
<li><a href="?y=2022&еще всякие запросы">2022</a></li>
<li><a href="?y=2021&еще всякие запросы">2021</a></li>
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и т.д.
</ul>
<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09">Сентябрь</a></li>
и т.д.
</ul>
<script>
const params = new URLSearchParams("y=2021&m=09"); //const params = new URLSearchParams(location.search);
document.querySelectorAll(".news-nav-list li").forEach(li => {
let link = li.querySelector("a");
let href = link.href;
let url = new URL(href);
let search = new URLSearchParams(url.search);
li.classList.remove("current-menu-item");
for (const [key, value] of search)
if (params.get(key) == value) {
li.classList.add("current-menu-item");
break;
}
})
</script>
</body>

</html>

firsmember

15.05.2022, 05:59

const params = new URLSearchParams(location.search)
Добавляет ко всем ссылкам с GET класс активной ссылки если в url оба запроса например ?y=2018&m=09
А если в URL 1 запрос например ?y=2018 Тогда класс активной ссылки добавляется к ссылке <li><a href="?y=2018&еще всякие запросы">2018</a></li>
и ко всем ссылкам месяцев

рони

15.05.2022, 07:38

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

рони

15.05.2022, 08:24

firsmember,
какие ключи будем проверять? алгоритм сравнения продумайте, пока такой вариант.
<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current-menu-item a{
color: red;
}
</style>
</head>

<body>
<ul class="news-nav-list">
<li><a href="?y=2022&еще всякие запросы">2022</a></li>
<li><a href="?y=2021&еще всякие запросы">2021</a></li>
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и т.д.
</ul>
<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09">Сентябрь</a></li>
и т.д.
</ul>
<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09&y=2018">тест</a></li>
и т.д.
</ul>

<script>
const params = new URLSearchParams("?y=2018&m=09"); //const params = new URLSearchParams(location.search);
document.querySelectorAll(".news-nav-list li").forEach(li => {
let link = li.querySelector("a");
let href = link.href;
let url = new URL(href);
let search = new URLSearchParams(url.search);
li.classList.remove("current-menu-item");
let add = ["y","m"].every(key => params.get(key) == search.get(key));
if(add) li.classList.add("current-menu-item");
})
</script>
</body>

</html>

рони

15.05.2022, 09:48

А если в URL 1 запрос например
?y=2018
Тогда класс активной ссылки добавляется к ссылке
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и ко всем ссылкам месяцев
возможно вы хотели так ...)))
<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current-menu-item a{
color: red;
}
</style>
</head>

<body>
<ul class="news-nav-list">
<li><a href="?y=2022&еще всякие запросы">2022</a></li>
<li><a href="?y=2021&еще всякие запросы">2021</a></li>
<li><a href="?y=2018&еще всякие запросы">2018</a></li>
и т.д.
</ul>
<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09">Сентябрь</a></li>
и т.д.
</ul>
<ul class="news-nav-list">
<li><a href="?всякие запросы&m=04">Апрель</a></li>
<li><a href="?всякие запросы&m=09&y=2018">тест</a></li>
и т.д.
</ul>

<script>
const params = new URLSearchParams("?y=2018"); //const params = new URLSearchParams(location.search);
document.querySelectorAll(".news-nav-list li").forEach(li => {
let link = li.querySelector("a");
let href = link.href;
let url = new URL(href);
let search = new URLSearchParams(url.search);
li.classList.remove("current-menu-item");
let add;
if(params.has("y") && params.has("m")) add = ["y","m"].every(key => search.has(key) && params.get(key) == search.get(key));
else if(params.has("m")) add = !search.has("y") && params.get("m") == search.get("m");
else if(params.has("y")) add = (!search.has("m") && params.get("y") == search.get("y")) || (search.has("m") && !search.has("y"));
if(add) li.classList.add("current-menu-item");
})
</script>
</body>

</html>

firsmember

17.05.2022, 15:33

Вы наверное меня не правильно поняли...

Если не активна ни одна ссылка то их перечень выглядит так
<ul class="news-nav-list">
Год:
<li><a href="?y=2022&m=05">2022</a></li>
<li><a href="?y=2021&m=05">2021</a></li>
<li><a href="?y=2018&m=05">2018</a></li>
</ul>
и соответственно
<ul class="news-nav-list">
Месяц:
<li><a href="?y=2022&m=04">Апрель</a></li>
<li><a href="?y=2022&m=09">Сентябрь</a></li>
</ul>
т.е. в параметры добавляется текущий год и месяц соответственно: Чтобы выбрав только год, можно было посмотреть статьи за текущий месяц нужного года, а если не выбирая год нажать на месяц то будут показаны статьи за текущий год выбранного месяца.

НО...

Если мы выбрали например 2018 год, то список ссылок уже на обновленной странице, будет выглядеть подругому - Вот так:

<ul class="news-nav-list">
Год:
<li><a href="?y=2022&m=05">2022</a></li>
<li><a href="?y=2021&m=05">2021</a></li>
<li><a href="?y=2018&m=05">2018</a></li>
</ul>
и соответственно
<ul class="news-nav-list">
Месяц:
<li class="current-menu-item"><a href="?y=2018&m=04">Апрель</a></li>
<li class="current-menu-item"><a href="?y=2018&m=09">Сентябрь</a></li>
</ul>

А если мы выбрали еще и месяц - например Сентябрь - то список ссылок уже будет таким:

<ul class="news-nav-list">
Год:
<li class="current-menu-item"><a href="?y=2022&m=09">2022</a></li>
<li class="current-menu-item"><a href="?y=2021&m=09">2021</a></li>
<li class="current-menu-item"><a href="?y=2018&m=09">2018</a></li>
</ul>

и соответственно

<ul class="news-nav-list">
Месяц:
<li class="current-menu-item"><a href="?y=2018&m=04">Апрель</a></li>
<li class="current-menu-item"><a href="?y=2018&m=09">Сентябрь</a></li>
</ul>

т.е. у меня в ссылке - в строке браузера - всегда есть параметр года и параметр месяца (если нажата хоть одна из них) - и всегда в порядке - ?y=ГОД&m=МЕСЯЦ

рони

17.05.2022, 15:47

firsmember,
я пас))) вам виднее ваши ссылки и что вы хотите выделить, я могу только гадать.

firsmember

17.05.2022, 16:06

ВОТ БЛИН! ЭТО Я ЗАТУПОК! Я НЕ Убрал, предыдущий скрипт!!!!
Рони - Вы Гений - не первый раз меня выручаете! Большое вам спасибо!
Счастья вам и вашим близким!

рони

17.05.2022, 16:15

т.е. у меня в ссылке - в строке браузера - всегда есть параметр года и параметр месяца
это самый первый вариант #7, который вам был предложен, но он вас не устроил.
видимо вы не смогли лаконично объяснить задачу, если из предложенных вариантов, вам ничего не подходит.

рони

17.05.2022, 16:19

firsmember,
ура!!!:)