使数据属性像锚一样

时间:2018-07-12 17:50:35

标签: javascript jquery html custom-data-attribute

是否有可行的方法使数据属性像锚一样?

考虑以下可能的情况:

<a id="link" href="#home">

<div data-section="home">

是否有可能将锚标签以相同的命名数据属性绑定到该div?

这不起作用,但是有点像:

$("#link").click(function(e) {
    var clickedLetter = $(this).attr('href');
    $(this).attr("href", "#section[data-group='" + clickedLetter + "']")
});

1 个答案:

答案 0 :(得分:3)

kawnah,我认为您需要获取点击元素的href

var clicked = $(this).attr('href');

之后,您可以使用替换功能并获取不含井号(#)的href

var myAttr = replace('#', clicked);

您最后要做的是将具有此数据部分的元素动画化为元素

var elementScrolledTo = $('*[data-section="' + myAttr + '"]');

$('html, body').animate({
                scrollTop: elementScrolledTo.offset().top
            }, 2000);

当然,这是事件上jquery的处理函数。 http://api.jquery.com/on/