HTML href 点击不刷新

在 HTML 中，我们通常使用 <a> 标签来创建超链接。当我们点击这个链接时，页面会自动刷新，并跳转到链接指向的页面。但是有时候我们只想要在当前页面中显示链接指向的内容，而不希望页面刷新。本文将介绍如何在点击超链接时不刷新页面的方法。

使用 JavaScript

我们可以使用 JavaScript 来实现在点击链接时不刷新页面的效果。具体方法是通过 event.preventDefault() 方法来阻止默认的跳转行为。

<a href="#" onclick="event.preventDefault();">Click me</a>

在上面的代码中，我们使用了一个空的 href 属性和一个 onclick 属性来执行 event.preventDefault() 方法。这样我们就能够在点击链接时不刷新页面了。

使用 jQuery

如果您使用了 jQuery 库，那么可以简化上面的操作。直接使用 $(this).click(function(event){}) 方法将事件绑定到链接上，并通过 event.preventDefault() 来阻止默认行为。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<a href="#">Click me</a>

<script>
  $(document).ready(function() {
    $('a').click(function(event) {
      event.preventDefault();
      alert("Link clicked!");
    });
  });
</script>

在上面的代码中我们引入了 jQuery 库，然后在 $(document).ready() 函数中注册了一个 click 事件。当用户点击链接时触发这个事件，并用 event.preventDefault() 方法阻止了默认的跳转行为。同时，我们弹出了一个提示框来确认链接是否被点击了。

使用 target 属性

HTML 提供了一个 target 属性，它可以指定链接跳转时应该在哪个窗口或框架中打开链接。如果将 target 属性设置为 _self，那么链接将在相同的窗口或标签页中打开，而不是新开一个页面。

<a href="https://www.baidu.com" target="_self">Click me</a>

在上面的代码中，我们将 target 属性设置为 _self，链接将在相同的标签页中打开，而不是新开一个页面。这样不仅可以避免页面刷新的问题，还可以让用户更加方便地浏览链接的内容。

总之，在 HTML 中实现点击链接不刷新页面有多种方法，可以使用 JavaScript、jQuery 或者设置 target 属性等等。具体使用哪种方法取决于个人喜好和具体场景。