无href仅含id的<a>标签工作原理及本地复现问题咨询

核心原理 #

原生<a>标签没有href属性时，只是个普通行内元素，不会自带跳转功能。你看到的页面里这类标签能实现跳转，全靠JavaScript事件绑定：

• 页面中的JS会监听所有带resourcelink类的<a>标签的点击事件
• 点击时从标签的id（比如示例里的resourcelinktitle61570）中提取资源编号（这里是61570）
• 再用这个编号拼接出对应的资源详情页地址，最后通过window.location.href或类似方法触发跳转

本地复现失败的原因 #

你只复制了HTML结构，但没有引入原页面中负责绑定点击事件的JavaScript逻辑，所以点击时不会触发任何跳转行为。

手动复现的方法 #

如果要模拟这个功能，需要自己补充对应的JS和CSS：

1. 添加点击事件的JS代码：

// 给所有带resourcelink类的a标签绑定点击逻辑
document.querySelectorAll('.resourcelink').forEach(link => {
  link.addEventListener('click', function() {
    // 从id里提取资源ID
    const resourceId = this.id.replace('resourcelinktitle', '');
    // 替换成你想要跳转的目标地址格式
    const targetUrl = `/resources/detail/${resourceId}`;
    window.location.href = targetUrl;
  });
});

2. 可选：添加CSS让标签看起来像可点击链接

.resourcelink {
  cursor: pointer;
}

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