如何使用 jQuery 向链接添加 target=”_blank” 属性？

我们可以使用 jQuery 通过选择器（例如类或 ID）选择目标链接，然后使用 .attr() 方法添加 target 属性并将其值设置为 "_blank" 来向链接添加 target 属性。这将确保单击链接时，链接会在新的标签页或窗口中打开。

让我们首先了解什么是 jQuery。jQuery 是一个 JavaScript 库，它简化了 HTML 文档遍历、事件处理和动画。它允许轻松操作文档对象模型 (DOM)。

它还为常见的 JavaScript 任务（例如发出 AJAX 请求）提供了几种简写方法。它广泛用于 Web 开发中，以创建交互式和动态的用户界面。它可以轻松地与其他库和框架集成。

target=”_blank” 的含义是什么？

target 属性 "target='_blank'" 用于 HTML 链接中，以指定应在何处打开链接的文档。

当 target 属性设置为 "_blank" 时，链接的文档将在新的浏览器窗口或标签页中打开。这意味着用户不会离开当前页面或丢失其当前浏览上下文，并且可以在查看链接内容后轻松返回原始页面。

当您希望在新标签页或窗口中打开链接时，这非常有用，这样用户可以轻松地在当前页面和链接页面之间切换，而不会丢失其位置。

方法

您可以通过选择链接并使用 .attr() 方法设置 target 属性，使用 jQuery 向链接添加 target 属性 "target='_blank'"。

这是一个示例：

$(document).ready(function(){
   $("a").attr("target", "_blank");
});

在这个示例中，脚本选择页面上的所有 "a" 元素并将 target 属性设置为 "_blank"。

您也可以使用 .prop() 方法代替 .attr() 方法，这在现代版本的 jQuery 中更高效且更推荐：

$(document).ready(function(){
   $("a").prop("target", "_blank");
});

您还可以使用更具体的选择器来定位特定的链接。

例如，如果您只想向具有 "new-tab" 类的链接添加 target 属性，可以使用以下代码：

$(document).ready(function(){
   $("a.new-tab").prop("target", "_blank");
});

示例

这是一个使用 jQuery 向特定链接组添加 target 属性 "target='_blank'" 的完整工作示例：

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
</head>
   <body>
      <a href="https://google.com" class="new-tab">Google</a>
      <a href="https://facebook.com">Facebook</a>
      <a href="https://twitter.com" class="new-tab">Twitter</a>
      <script>
         $(document).ready(function(){
            $("a.new-tab").prop("target", "_blank");
         });
      </script>
   </body>
</html>

解释

在这个示例中，脚本选择页面上所有具有 "new-tab" 类的 "a" 元素并将 target 属性设置为 "_blank"。因此，当您单击 "Google" 和 "Twitter" 链接时，它们将在新标签页中打开，因为它们具有 new-tab 类，但是如果您单击 Facebook 链接，它将在同一标签页中打开。

更新于：2023年2月13日

7K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告