Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2022, 11:08
Аспирант
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 76

Добавить класс родителю активной ссылки при наличии 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>


Заранее премного благодарен за помощь.. !
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2022, 11:38
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,697

А что происходит при нажатии на ссылку?
Переход на другую страницу или обновление этой?
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2022, 19:06
Аспирант
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 76

Обновление этой
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2022, 19:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

firsmember,
Возможно ли такое на javascript
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2022, 10:06
Аспирант
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 76

Сообщение от рони Посмотреть сообщение
firsmember,
Возможно ли такое на javascript
По ссылке спрашивают о страницах, а, как отдельные ссылки связаны с GET Запросами?
Не понимаю
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2022, 10:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

firsmember,
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2022, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

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>
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2022, 05:59
Аспирант
Отправить личное сообщение для firsmember Посмотреть профиль Найти все сообщения от firsmember
 
Регистрация: 08.11.2019
Сообщений: 76

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, 15.05.2022 в 06:09.
Ответить с цитированием
  #9 (permalink)  
Старый 15.05.2022, 07:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

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

Последний раз редактировалось рони, 15.05.2022 в 07:45.
Ответить с цитированием
  #10 (permalink)  
Старый 15.05.2022, 08:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,981

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>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить класс при скролле Quark_ Javascript под браузер 1 16.02.2016 12:42
Как добавить и удалить класс при нажатии на div? Jeick9 Events/DOM/Window 23 10.03.2015 15:05
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 03:43
Как при появление класса в блоке1, добавить класс в блок2? raindew jQuery 3 11.10.2013 20:05
Как добавить класс к нужному элементу при наведении на определеные ссылки? crazygangster77 Events/DOM/Window 3 05.06.2013 01:19