javascript - 导航到具有与单击元素的 data-id 数据属性相同的 id 的元素

Question

我目前正在制作类似“一页”概念的网页，我遇到了我希望用户 View 导航到指定元素的地方，该元素的 id 等于当前单击元素的 data-id 属性。

导航div(我更喜欢根据自己的要求使用div)

<div class="extend clear navigator">
    <div class="navigator_nav extend align_left margin_right5px" id="tes1">Test 2</div>
    <div class="navigator_nav extend align_left margin_right5px" id="tes2">Test 2</div>
    <div class="navigator_nav extend align_left margin_right5px" id="tes3">Test 3</div>
</div>

和内容元素

<div class="page_content container extend clear" data-id="test1">Test 1 container</div>
<div class="page_content container extend clear" data-id="test2">Test 2 container</div>
<div class="page_content container extend clear" data-id="test3">Test 3 container</div>

因此，如果单击 id 为“test1”的 div，则导航到 id 为 test1 的元素(向上/向下滚动，无论该元素位于何处具有与当前单击元素数据属性相同的 id name data-id) 有什么想法吗？

Answer 1

实际上，做相反的事情会容易得多 - 在导航上使用 data-id 属性，在要滚动到的元素上使用简单的 id。这样，可以通过将 location.hash 设置为按钮的 data-id 来实现:

$(".navigator_nav").click(function (elem) {
    location.hash = $(elem).data(id);
}

此外，它还允许您在必要时创建另一个导航(由于 ID 必须是唯一的，因此您无法使用您的解决方案进行此操作)。

作为旁注，如果您不必使用 div 进行导航，那么根本就没有 JS:

<div class="extend clear navigator">
    <a class="navigator_nav extend align_left margin_right5px" href="#test1">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#test2">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#test3">Test 3</a>
</div>