重新加载页面后在 url 中添加锚点并在 JS 中显示隐藏部分

Question

当我点击带有锚点的 link 时，我会在点击 link 后加载另一个页面。我的问题是我在重新加载后没有成功执行显示隐藏部分的脚本。

重新加载带有目标的新页面后，如何执行脚本和显示部分？谢谢。

模板

echo '<li><a href="'.get_site_url().'/works#works-list" class="list-link">List</a></li>';

JS脚本

$('.list-link').click(function() {
    $('#works-list').removeClass("hide");
});

Answer 1

由于页面重新加载，click 事件将在旧页面上触发，因此不会编辑新加载页面的 dom。但是，由于您向 url 添加了一个锚点，因此您可以在每次加载页面时检查该锚点，新代码将如下所示。

if(location.href.includes("#works-list")) {
    $('#works-list').removeClass("hide");
}

Add anchor in url after page reload and display hidden section in JS