HOWTO · JavaScript

JavaScript href 表达式

本文解释了 href 表达式在 JavaScript 中的作用。

本页内容

本文将帮助你了解 href 表达式及其在 JavaScript 中的工作机制。

JavaScript href 表达式

HTML 元素(或锚元素)上的 href 属性生成指向网页、文件、电子邮件地址、页面位置或 URL 可以表示的任何其他内容的超链接。

<p>You can reach to this link:</p>
<ul>
  <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
</ul>

在此处运行代码

输出:

JavaScript 链接

要保持在同一页面上,你还可以在 href 属性中提供名称或空 URL。

<a href="javascript:;"></a>

上面的代码通常用于创建链接,而无需在 href 属性中指定真正的 URL。

在 JavaScript 中使用带有哈希的 href 表达式

哈希 # 指定一个 HTML 元素 id,其中窗口应在超链接中拖动。

尽管 href="#" 没有提供 id 名称,但它确实指定了一个位置 - 页面顶部。当你单击带有 href="#" 的锚点时,滚动位置将移动到顶部。

<h1>Scroll to the bottom of the page and click the link</h1>
<a href="#">Scroll to Top</a>

你可以在此处查看演示

在 JavaScript 中将 href 表达式与函数一起使用

基本上,不是使用链接来移动页面(或锚点),而是使用此方法将启动一个或多个 JavaScript 函数。

<html>
  <body>
    <script>
function doSomething() {
  alert("hello Delft")
}
</script>
<a href="javascript:doSomething();">click me</a>
  </body>
</html>

在此处运行代码

当你单击该链接时,它会触发警报,调用 JavaScript 函数,你将看到一个弹出窗口,上面写着 hello Delft

输出:

弹出窗口