在新选项卡上使用 jQuery 重定向到链接 - JavaScript

有时候我们想要在网页中打开一个链接，但不希望离开当前页面。这时可以使用 jQuery 来实现在一个新的选项卡中打开链接的效果。

实现方法

我们可以使用 jQuery 的 click() 方法来添加一个点击事件，然后使用 window.open() 方法来打开一个新的选项卡。

下面是一段代码示例，会在点击链接时在一个新的选项卡中打开链接：

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
    window.open(url, '_blank');
  });
});

这段代码的主要逻辑是：

• 给所有的链接添加一个点击事件。
• 在点击事件中先禁止默认行为（也就是不会在当前选项卡中打开链接）。
• 获取链接的 href 属性值。
• 调用 window.open() 方法，在一个新的选项卡中打开链接。

代码分析

$(document).ready()

这一部分代码表示在文档完全加载后执行脚本。因为在网页加载时，如果我们试图访问还没有准备好的元素，会出现错误。$(document).ready() 保证了我们的脚本执行时 DOM 已经准备好了。

$('a')

这部分代码会选择文档中所有的超链接元素。

.click()

这一部分代码会添加一个点击事件，当用户点击超链接时，代码会执行。

event.preventDefault()

这部分代码会禁止默认行为。在这个例子中，点击超链接默认的行为是在当前选项卡中打开链接，我们希望在新的选项卡中打开链接，所以需要禁止默认行为。

$(this).attr('href')

这部分代码会获取链接的 href 属性，也就是链接的目标 URL。

window.open()

这部分代码会在一个新的选项卡中打开链接。第一个参数是要打开的页面的 URL，第二个参数是打开链接的方式，_blank 表示在新的选项卡中打开链接。

总结

使用 jQuery 可以更加方便地实现在新的选项卡中打开链接的效果。

代码示例：

$(document).ready(function() {
  $('a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
    window.open(url, '_blank');
  });
});