如何隐藏<a>标签中的URL，保持链接可点击且不对外暴露

下面是几种能隐藏URL、同时保留点击跳转功能的简便实现方式：

1. jQuery 点击触发跳转 #

HTML里只放链接文本，不写href属性，源码里完全看不到目标URL：

<span class="clickable-link">Link to Page</span>

用jQuery绑定点击事件触发跳转：

$('.clickable-link').on('click', function() {
  // 打开新窗口跳转，若要在当前页跳转则用 location.href = '目标URL'
  window.open('http://www.google.com', '_blank', 'noopener,noreferrer');
});

加CSS让元素视觉上像普通链接：

.clickable-link {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

2. 原生JavaScript 实现 #

不依赖jQuery，直接用原生JS绑定点击逻辑：

<div class="fake-link" onclick="jumpToTarget()">Link to Page</div>

<script>
function jumpToTarget() {
  window.open('http://www.google.com', '_blank', 'noopener,noreferrer');
}
</script>

同样可以通过CSS调整样式，模拟链接的视觉效果。

注意事项 #

• 这类方法依赖JavaScript，禁用JS的用户无法触发跳转，无JS渲染能力的爬虫也抓不到目标URL（正好匹配你隐藏URL的需求）。
• 若要避免跳转时传递页面信息，可在window.open里加上noopener,noreferrer参数，等价于rel="nofollow noreferrer"的作用。

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