jQuery HTML 锚点链接 – href 和 onclick 都可以吗

在本文中，我们将介绍如何在网页中使用jQuery来创建链接并使用不同的方式来指定跳转位置。

阅读更多：jQuery 教程

使用 href 属性创建链接

在HTML中，我们通常使用<a>标签来创建链接。使用href属性可以指定链接的目标地址。例如，以下代码创建了一个跳转到Google的链接：

<a href="https://www.google.com">跳转到Google</a>

这个链接将在用户点击时跳转到指定的网页。但是，默认情况下，它会完全加载目标网页，并导致当前页面的跳转。

使用 onclick 事件实现跳转

如果我们想要在不加载新页面的情况下执行跳转操作，可以使用onclick事件。通过onclick事件，我们可以使用JavaScript代码来执行自定义的跳转操作。以下是一个示例：

<a href="#" onclick="跳转到Google()">跳转到Google</a>

<script>
function 跳转到Google() {
  window.location.href = "https://www.google.com";
}
</script>

在这个例子中，我们给链接添加了一个onclick属性，当用户点击该链接时，将调用名为跳转到Google()的JavaScript函数。这个函数通过window.location.href实现了页面的跳转。

使用onclick事件的好处是可以在页面上实现动态的跳转，并且不会导致页面重新加载。

同时使用 href 和 onclick

有时候，我们可能希望同时使用href属性和onclick事件。这样做的好处是，在不支持JavaScript的浏览器中，仍然可以通过href属性实现跳转。

以下是一个示例，在同时使用href和onclick的情况下，当浏览器支持JavaScript时，将使用onclick事件来实现跳转；当浏览器不支持时，将使用href属性进行跳转：

<a href="https://www.google.com" onclick="跳转到Google(); return false;">跳转到Google</a>

<script>
function 跳转到Google() {
  window.location.href = "https://www.google.com";
}
</script>

在这个例子中，我们在onclick事件中调用了跳转到Google()函数，并使用return false来阻止默认的href属性跳转行为。

通过同时使用href属性和onclick事件，我们可以在任何浏览器中都实现跳转操作。

总结

通过本文，我们学习了如何在网页中使用jQuery来创建链接，并使用不同的方式来指定跳转位置。我们了解到了使用href属性可以实现默认的页面跳转，使用onclick事件可以实现自定义的跳转操作，以及如何兼容性地同时使用href属性和onclick事件来实现跳转。

通过灵活使用这些方法，我们可以根据实际需求来选择适合的跳转方式，提升网页交互的体验。