html - 从锚点中选择数据过滤器

Question

单击时如何使锚点转到数据过滤器的类别？我想在单击此锚点时显示特定过滤器的图像。

我的锚代码如下：

   <h4 class="title"><a href="#portfolio">A</a></h4>

和数据过滤器：

      <div class="row">
      <div class="col-lg-12">
        <ul id="portfolio-flters">
          <li data-filter="*" class="filter-active">Todo</li>
          <li data-filter=".filter-rein">A</li>
          <li data-filter=".filter-peqin">B</li>
          <li data-filter=".filter-man">C</li>
          <li data-filter=".filter-covid">D</li>
          <li data-filter=".filter-mob">E</li>
          <li data-filter=".filter-serv">Services</li>

标签： html

Answer 1

你可以试试这个。

  let li = document.querySelectorAll("#portfolio-flters li");
  for (let i = 0; i < li.length; i++) {
    const el = li[i];
    el.addEventListener("click", (e) => {
      let dataValue = el.getAttribute("data-filter");
      let item = document.querySelector(dataValue);
      window.scrollTo(0, item.offsetTop);
    });
  }