超链接 a 标签 href 设置 # 和 javascript:; 的区别

要想知道上述问题的答案，我们先来了解一下 a 标签中 href=""的几种用法。

a 标签中 href 的几种用法

JS 调用

<!-- 不推荐 -->
<a href="javascript:js_method();"></a>
<!-- 推荐：void(0)地址不发生跳转 -->
<a href="javascript:void(0);" onclick="js_method()"></a>
<!-- 推荐：javascript:;地址不跳转，执行一条空js代码 -->
<a href="javascript:;" onclick="js_method()"></a>
<!-- 返回顶部 -->
<a href="#" onclick="js_method()"></a>
<!-- 推荐：页面不跳转，在当前位置 -->
<a href="#" onclick="js_method();return false"></a>

  1. href="javascript:js_method();" 是常用的方法，但在传递this等参数时容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发 window.onbeforeunload 事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。

  2. href="javascript:void(0);" onclick 执行 js 函数，void 是一个操作符，void(0)返回 undefined，地址不发生跳转。不暴露 js 方法在浏览器状态栏。

  3. href="javascript:;"类似 void(0)，地址不发生跳转，区别→只是执行了一条空的 js 代码。

  4. href="#" #是标签内置的一个方法，代表 top，常用于点击后返回到页面最顶端。

  5. href="#" onclick="return false" 页面不发生跳转，执行后还是在页面当前位置。

综上所述，href="javascript:void(0);"、href="javascript:;" 、href="#" onclick="return false"执行效果相同，推荐使用这三种。

href="#"

返回顶部效果，#是标签内置的一个方法，代表 top。

href="URL"

给超链接标签 href 属性设置 URL 可以实现对应链接的跳转功能。

  • 外部链接：绝对 URL， 跳转到外部链接，如<a href="http://baidu.com">百度</a> 跳转到百度。

  • 内部链接：相对 URL，网站内部页面相互链接。

  • 空链接：返回顶部<a href="#"></a>。

  • 下载链接：若href里地址是一个文件或压缩包，会下载这个文件。

  • 网页元素链接：网页中各种网页元素（文本/图像/表格/音频/视频）都可以添加超链接。

  • 锚点链接#：点击链接可快速定位到页面中某个位置，<a href="#特定id名">链接文本</a>可以快速定位到页面中 id="特定 id 名"的部分。