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

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Добавить класс родителю активной ссылки при наличии GET Запроса в URL (https://javascript.ru/forum/dom-window/84001-dobavit-klass-roditelyu-aktivnojj-ssylki-pri-nalichii-get-zaprosa-v-url.html)

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

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

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

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

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

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

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

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

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

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

Цитата:

Сообщение от рони (Сообщение 545362)

firsmember,
http://javascript.ru/forum/misc/3852...avascript.html

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

URLSearchParams active link

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&amp;еще всякие запросы">2022</a></li>
        <li><a href="?y=2021&amp;еще всякие запросы">2021</a></li>
        <li><a href="?y=2018&amp;еще всякие запросы">2018</a></li>
        и т.д.
    </ul>
    <ul class="news-nav-list">
        <li><a href="?всякие запросы&amp;m=04">Апрель</a></li>
        <li><a href="?всякие запросы&amp;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>

const params = new URLSearchParams(location.search)

Добавляет ко всем ссылкам с GET класс активной ссылки если в url оба запроса например

?y=2018&m=09

А если в URL 1 запрос например

?y=2018

Тогда класс активной ссылки добавляется к ссылке

<li><a href="?y=2018&amp;еще всякие запросы">2018</a></li>

и ко всем ссылкам месяцев

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

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

Цитата:

Сообщение от firsmember

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

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

Если не активна ни одна ссылка то их перечень выглядит так

<ul class="news-nav-list">
Год:
<li><a href="?y=2022&amp;m=05">2022</a></li>
<li><a href="?y=2021&amp;m=05">2021</a></li>
<li><a href="?y=2018&amp;m=05">2018</a></li>
</ul>

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

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

т.е. в параметры добавляется текущий год и месяц соответственно: Чтобы выбрав только год, можно было посмотреть статьи за текущий месяц нужного года, а если не выбирая год нажать на месяц то будут показаны статьи за текущий год выбранного месяца.

НО...

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

<ul class="news-nav-list">
Год:
<li><a href="?y=2022&amp;m=05">2022</a></li>
<li><a href="?y=2021&amp;m=05">2021</a></li>
<li><a href="?y=2018&amp;m=05">2018</a></li>
</ul>

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

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

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

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

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

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

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

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

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

Цитата:

Сообщение от firsmember

т.е. у меня в ссылке - в строке браузера - всегда есть параметр года и параметр месяца

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

firsmember,
ура!!!:)