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

navigate to the element that has an id same to the data-id data attribute of the click element

本文关键字：元素 数据属性 id data-id click 导航      更新时间：2023-09-26

我目前正在制作一个类似"一页"概念的网页，我遇到了我希望用户视图导航到指定元素的地方，其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>

因此，如果单击具有"test1"的id的div，然后导航到具有test1的id的元素(向上/向下滚动，无论该元素位于有一个id相同的当前单击元素数据属性名称data-id)任何想法如何使它?

实际上，相反的做法要容易得多——在导航栏上设置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>

参见jQuery滚动到元素

要动态选择data-id与所单击元素的id匹配的div，您可以通过属性div[data-id=" + id + "]"

动态选择div
$(".navigator_nav").click(function() {   
    var id = $(this).attr('id');    
    $('html, body').animate({
        scrollTop: $("div[data-id=" + id + "]").offset().top
    }, 2000);
});

尝试使用锚代替，即正常的a与href，它指向id:

<a class="extend clear navigator">
    <a class="navigator_nav extend align_left margin_right5px" href="#tes1">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#tes2">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#tes3">Test 3</a>
相关文章：