Ссылка с другого элемента страницы на указанный c фильтр данных

Question

У меня есть страница портфолио HTML с атрибутом фильтрации

                    <ul class="portfolio-filters list-inline">
                        <li class="filter active" data-filter="all">All</li>
                        <li class="filter" data-filter="webdesign">Web Design</li>
                        <li class="filter" data-filter="responsive">Responsive</li>
                        <li class="filter" data-filter="wordpress">Wordpress</li>
                    </ul>

И у меня есть еще одна страница HTML с некоторыми услугами. Пример одного из моих кодов на другой странице:

                <div>
                    <i><a href="#" class="fa fa-code"></a></i>
                    <div>
                    <h4>Web Design</h4>
                    </div>
                </div>

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

Я пробовал много способов, таких как добавление портфолио ссылок. html? Filter = webdesign к href иконки сервиса, но это не сработало.

Answer 1

Я думаю, вы должны следовать нескольким учебникам по HTML5, CSS 3 и Javascript.

Я сделал базовую c версию в этой кодовой ручке . Обратите внимание, что я использую URLSearchParams API , который не поддерживается в IE и других более старых браузерах. Также я использую Ecmascript 6 .

Что делает алгоритм?

1. Проверьте URL, есть ли параметр фильтра (как в http://.../somewhere?filter=wordpress)
2. Если нет, ничего не делайте и покажите все, в противном случае,
3. получить все содержимое, которое имеет filter класс
4. , отображает содержимое, которое соответствует
5. , скрывает остальное.

Суть алгоритма заключается в получении параметры запроса, то это вопрос циклического перебора коллекции и изменения атрибута style display (см. документацию для атрибута отображения )

// 1. get URL query param (does not work on IE, AFAIK)
const url = new URL(window.location.href)
const currentFilter = url.searchParams.get('filter')

// we only filter stuff if a filter is provided
if (currentFilter != null) {

  // 2. collect all filters
  const collection = document.getElementsByClassName('filter')

  // 3. traverse the collection, hide what's not of interest, show the rest
  for (let item of collection) {
    if (item.classList.contains(currentFilter)) {
      item.style.display = 'block'
      break
    }

    item.style.display = 'none'
  }
}

Answer 2

Может быть, это работает для вас. Дайте вашим тегам li указать c идентификаторы:

<ul class="portfolio-filters list-inline">
  <li class="filter active" data-filter="all" id="all-filter">All</li>
  <li class="filter" data-filter="webdesign" id="webdesign-filter">Web Design</li>
  <li class="filter" data-filter="responsive" id="responsive-filter">Responsive</li>
  <li class="filter" data-filter="wordpress" id="wordpress-filter">Wordpress</li>
</ul>

Затем вы можете просто указать ссылку на указанные c id:

<div>
  <i><a href="portfolio.html/#webdesign-filter" class="fa fa-code"></a></i>
  <div>
    <h4>Web Design</h4>
  </div>
</div>

В противном случае вам придется использовать javascript Я думаю.