从锚点中选择一个数据过滤器

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>

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);
});
}