JavaScript href 表达式

Shiv Yadav 2023年1月30日 2022年5月10日
  1. JavaScript href 表达式
  2. 在 JavaScript 中使用带有哈希的 href 表达式
  3. 在 JavaScript 中将 href 表达式与函数一起使用
JavaScript href 表达式

本文将帮助你了解 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

输出:

弹出窗口

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相关文章 - JavaScript Href