从另一个页面元素链接到特定的数据过滤器

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>

我想要的是当用户点击这个服务图标时，它会将用户重定向到投资组合页面的网页设计过滤器。

我尝试了很多方法，例如将链接 portfolio.html?filter=webdesign 添加到服务图标的 a href 中，但没有奏效。

Answer 1

我认为你应该学习一些关于 HTML5、CSS 3 和 Javascript 的教程。

我在this codepen 做了一个基础版。请注意，我使用的是 IE 和其他旧版浏览器不支持的 URLSearchParams API。另外，我正在使用Ecmascript 6。

算法是做什么的？

1. 查看网址，是否有过滤参数（如http://.../somewhere?filter=wordpress）
2. 如果不是，什么都不做，展示一切，否则，
3. 获取所有具有filter 类的内容
4. 显示匹配的内容
5. 隐藏其余部分。

算法的关键在于获取查询参数，然后就是循环遍历一个集合并改变style的display属性（见the documentation for the display attribute）

// 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 标签特定的 id：

<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>

然后你可以直接链接到具体的id：

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

否则我猜你将不得不使用 javascript。