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)

рони 15.05.2022 09:48

Цитата:

Сообщение от firsmember
А если в URL 1 запрос например
?y=2018
Тогда класс активной ссылки добавляется к ссылке
<li><a href="?y=2018&amp;еще всякие запросы">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>

firsmember 17.05.2022 15:33

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

Если не активна ни одна ссылка то их перечень выглядит так
<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=ГОД&amp;m=МЕСЯЦ

рони 17.05.2022 15:47

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

firsmember 17.05.2022 16:06

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

рони 17.05.2022 16:15

Цитата:

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

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

рони 17.05.2022 16:19

firsmember,
ура!!!:)


Часовой пояс GMT +3, время: 12:24.