Добавление активного класса в div, когда хэш URL совпадает с определенным div

ProgramBox

Добавление активного класса в div, когда хэш URL совпадает с определенным div

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

У меня есть страница с горизонтальной гармошкой. Это делается с помощью некоторых css и Javascript, которые добавляют класс active на панель, на которую нажата кнопка. Вы можете найти самую базовую версию этого здесь: https://codepen.io/kubuskwal/pen/JjJjGmo

Теперь я должен сделать так, чтобы, например, когда URL-адрес имеет параметр #hash site.com/mypage#red, панель с классом red также должна автоматически получать класс active при загрузке страницы и, таким образом, расширяться.

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

 const currentUrl = window.location.hash
if  (currentUrl == "#red") {
    document.querySelector(".panel").classList.add("active");
}

Было бы лучше, если бы я мог сравнить currentUrl его с классами внутри разделов панели , и если у одного из них есть класс, который соответствует currentUrl , он должен добавить активный класс в этот раздел. Но я потратил целый день, пытаясь понять, как это сделать, но безрезультатно :(. Здесь есть много похожих (но не совсем одинаковых) вопросов с решениями, и я рассмотрел их все, но большинство из них связаны с jQuery, и, к сожалению, я ограничен ванильным Javascript.

Любая помощь была бы очень признательна. Спасибо!

1. Как вы получаете хэш #red в URL-адресе? вы добавите или это должно произойти автоматически, когда мы нажмем на div?

2. Он будет использоваться в качестве страницы, выделяющей различные рекламные акции (каждая панель представляет одну), и, скажем, я хочу поделиться одной из рекламных акций на facebook, мне нужно иметь возможность перейти по ссылке на страницу и автоматически открыть соответствующую панель. После того, как пользователь попал на страницу, он может закрыть панель и нажать на другие, чтобы узнать о других рекламных акциях. При «органическом» доступе к странице через веб-сайт вместо ссылки с хэшем #все панели должны находиться в неактивном состоянии. Надеюсь, это все прояснит!

3. я добавил свой ответ можете ли вы разобраться в этом

Ответ №1:

Просто протестировал это локально с помощью javascript, и похоже, что вы неправильно настроили querySelector. Измените его на следующий:

 if  (currentUrl === '#red') {
    document.querySelector(".red").classList.add("active");
}

Обновленный:

 const currentUrl = location.hash
const classSelector = currentUrl.replace('#','.')

if (currentUrl) {
  document.querySelector(classSelector).classList.add("active");
}

1. Аааа, конечно, я сильно переосмыслил это, желая добавить активный класс в div, содержащий .panel и соответствующий класс с цветовой кодировкой, но я, конечно, мог бы просто нацелиться на .red вместо .panel. О! Я смог повторить этот код для #синего, #зеленого, #желтого и т.д., И он работает именно так, как я хотел. Хотя это не совсем СУХОЙ код, так как я уверен, что есть способ просто сравнить строки (за исключением # и.), но это то, над чем стоит поработать дальше :D. Большое вам спасибо!

2. Не беспокойтесь, буду рад помочь! Немного обновили его, чтобы вам не нужно было жестко кодировать значения в——-: const currentUrl = местоположение. хэш-константа classSelector = currentUrl.заменить (‘#’,’.’), если (currentUrl) { документ. Элемент запроса(элемент класса).Список классов.добавить(«активный»); }

3. О, прекрасно! Вау, на самом деле это было так просто… Мне еще предстоит пройти долгий путь. Спасибо, я снова узнал кое-что новое

Ответ №2:

Добавьте этот код javascript в свой скрипт

 let selectedDiv = window.location.hash;
selectedDiv = selectedDiv.substring(1);
const selectedPanel = document.querySelector("." selectedDiv);
if (selectedPanel) {
    selectedPanel.classList.add('active');
}

1. Ах, спасибо, это именно тот результат, который мне был нужен. Я хотел бы отметить два ответа как лучшие. Я думаю, что подход @Jacob немного более элегантен с использованием замены, так как это позволило выполнить работу с меньшим количеством строк кода, но, честно говоря, оба подхода идеальны :)!

Ответ №3:

если URL содержит #красный, добавьте активный класс, а если URL не содержит, и на странице все еще есть активный класс с красным, поэтому его нужно удалить

 
    const currentUrl = window.location.hash;
    if (currentUrl == "#red") {
        document.querySelector(".red").classList.add("active");
    }
    else{
        if (document.querySelector(".red").classList.contains('active')) {
            document.querySelector(".red").classList.remove('active');
        }
    }

В более упрощенном виде!
если просто хотите добавить класс

 const currentUrl = window.location.hash;
    if (currentUrl == "#red") {
        document.querySelector(".red").classList.add("active");
    }

1. Ах, извините, что не было ясно, но это должно сработать только при первой загрузке. Если пользователь обращается к странице в обычном режиме, все панели должны запускаться в неактивном состоянии. Например, если они попадают на страницу с хэшем #red, она должна начинаться с открытой красной панели, но они могут закрыть ее после этого и открыть/закрыть другие. Ваш код определенно был бы полезен, если бы это было не так, хотя, спасибо!!

Ответ №4:

Компактным способом может быть следующее: использование ?. оператора, чтобы избежать ошибки, когда элемент не найден

 const selector = window.location.hash.replace('#', '.');
if(selector) {
    document.querySelector(selector)?.classList.add("active")
}

Обратите внимание, что вы должны проверять, когда селектор является пустой строкой, потому что в противном случае querySelector выдаст a DOMException .

если для селектора можно указать значение по умолчанию, фрагмент может быть еще короче

 const selector = window.location.hash.replace('#', '.') || '.the-default-element';

// ...

document.querySelector(selector)?.classList.add("active")

Метки: Добавление активного класса в div, когда хэш URL совпадает с определенным div