点击锚点a标签时如何获取对应href属性中的#id值（jQuery场景）

根因说明 #

你现有代码的问题在于$(".sub_navi li a").attr('href')的写法是选中所有.sub_navi下的a标签，jQuery的attr()方法默认只会返回匹配元素集合中第一个元素的属性值，所以无论你点击哪个a标签，永远只能拿到第一个的href属性。
同时原代码的hash存在性判断逻辑有问题：indexOf匹配不到内容时返回-1，直接作为布尔值判断时，若匹配到的下标为0会被误判为不存在。

修正方案 #

在事件回调函数中使用$(this)指向当前触发点击事件的a标签，直接获取它的href属性即可，修正后完整代码如下：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    // 用$(this)获取当前被点击的a标签元素
    var currentHash = $(this).attr('href');
    // 若需要点击后同步更新地址栏hash可加上下面这行
    // window.location.hash = currentHash;
    if (window.location.hash.indexOf(currentHash) !== -1) {
        console.log("当前URL包含hash值：" + currentHash);
    }
});

改动点说明 #

• 把原来选中所有a标签取属性的逻辑替换为$(this).attr('href')，直接获取当前点击元素的属性
• 修正hash存在性判断逻辑，避免indexOf返回0时被误判为不存在

内容的提问来源于stack exchange，提问作者Faee