Как сделать, чтобы при переходе по определенной ссылке на страницу появлялись дополнительные css свойства

Question

Вообщем у меня есть ссылка на одной странице и раскрывающийся знаком + список на другом. Мне необходимо, чтобы при переходе по этой ссылке страница открылась уже с раскрытым списком. Как это можно реализовать? Создавать дополнительную страницу не вариант как минимум потому, что ссылок таких будет 5 и 5 разных списков на одной странице. Список открывается путем изменения свойства display с none на block.

Answer 1

Ссылка должна быть с дополнительным параметром. Например нам нужно открыть листы 1 и 3:

https://site.com?listOpen=1&listOpen=3

Читаем наши параметры URL, они записаны в window.location.search.

const listsToOpen = new URLSearchParams(window.location.search).getAll('listOpen'); // получаем массив строк ['1', '3'];
for (let list of listsToOpen) {
 document.querySelector(`[data-list="${list}"]`).style.display = 'block'; // Я не знаю как вы захотите искать эти листы в документе, если так же, то не забудьте добавить атрибут data-list="<номер листа>" к элементам листов
}

Подробенее про интерфейс Location.
Про конструкцию URLSearchParams

UPD

Чтобы было покомпактнее, можно использовать 1 параметр такого вида:

https://site.com?listOpen=13

Затем обработать его таким образом:

const listsToOpen = new URLSearchParams(window.location.search).get('listOpen'); // получаем строку '13';
for (let list of listsToOpen) {
 document.querySelector(`[data-list="${list}"]`).style.display = 'block';
}

Но это будет работать только если этих листов будет <= 10(от 0 до 9), т.к, например, data-list="23" будет восприниматься как листы с data-list="2" и data-list="3". Там уже нужен будет алгоритм посложнее.

Answer 2

Вот дедовский метод для поддержки старых браузеров:

var params = location.search.slice(1).split('&')
for(let i = 0; i < params.length; i++) {
    let a = params[i].split('=')
    if(a[0] === 'listOpen') {
      document.querySelector('[data-list="'+ a[1] +'"]').style.display = 'none'
    }
  }
}

Пример ссылки:

https://example.com/page?listOpen=1&listOpen=2&listOpen=34

БЛОГ НА HUSL

Как сделать, чтобы при переходе по определенной ссылке на страницу появлялись дополнительные css свойства

Ответы (2 шт):

UPD