首页 > 文章 > 前端

使用 jQuery 为多个链接创建点击事件以在新标签页中打开

时间：2025-11-20 15:09:26 441浏览收藏

推广推荐

支持 PC / 移动端，安全直达

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《使用 jQuery 为多个链接创建点击事件以在新标签页中打开》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

本教程旨在解决如何使用 jQuery 为页面上的多个链接（`` 标签）绑定点击事件，并在点击时在新标签页中打开每个链接。我们将探讨常见问题，并提供有效的解决方案，确保所有链接都能按预期工作。

问题分析

常见的问题是，当使用 $('.tbl a').each() 循环遍历链接并使用 window.open() 打开新标签页时，可能只有第一个链接有效。这通常是因为浏览器的弹出窗口阻止程序或一些其他因素干扰了循环中的后续 window.open() 调用。

解决方案

以下提供一种可靠的解决方案，使用 jQuery 的 on('click', function(){ ... }) 事件监听器，结合 each() 方法来遍历链接，并在新的标签页中打开它们。

HTML 结构示例:

<h1>在新标签页中打开链接</h1>

<p>一个无序列表:</p>
<ul>
  <li><a href="https://www.example.com/coffee">咖啡</a></li>
  <li><a href="https://www.example.com/tea">茶</a></li>
  <li><a href="https://www.example.com/milk">牛奶</a></li>
</ul>

<p class="opener">点击打开所有链接</p>

jQuery 代码:

$('.opener').on('click', function(){
  $('ul a').each(function (index) {
    var url = $(this).attr("href");
    window.open(url, '_blank' + index); // 使用 index 避免标签页覆盖
  })
});

CSS 样式 (可选):

.opener {
  display: inline-block;
  background-color: #ccc;
  cursor: pointer;
  color: #FFF;
  padding: 5px 10px; /* 增加内边距，使按钮更美观 */
}

代码解释:

.opener 选择器: 我们为拥有 opener 类的元素（在这里是一个
标签）绑定了一个点击事件。当点击这个元素时，会触发打开所有链接的操作。
$('ul a').each(function (index) { ... }): 这段代码选择了

完整代码示例:

<!DOCTYPE html>
<html>
<head>
<title>在新标签页中打开多个链接</title>
<style>
.opener {
  display: inline-block;
  background-color: #ccc;
  cursor: pointer;
  color: #FFF;
  padding: 5px 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1>在新标签页中打开链接</h1>

<p>一个无序列表:</p>
<ul>
  <li><a href="https://www.example.com/coffee">咖啡</a></li>
  <li><a href="https://www.example.com/tea">茶</a></li>
  <li><a href="https://www.example.com/milk">牛奶</a></li>
</ul>

<p class="opener">点击打开所有链接</p>

<script>
$('.opener').on('click', function(){
  $('ul a').each(function (index) {
    var url = $(this).attr("href");
    window.open(url, '_blank' + index);
  })
});
</script>

</body>
</html>

注意事项:

jQuery 引入: 确保在 HTML 文件中正确引入 jQuery 库。
浏览器弹出窗口阻止程序: 某些浏览器可能会阻止弹出窗口。用户可能需要允许来自该网站的弹出窗口才能使该功能正常工作。
唯一标签页名称: '_blank' + index 的作用至关重要。如果没有唯一的标签页名称，浏览器可能会将所有链接打开到同一个标签页中，覆盖之前打开的链接。
事件委托： 如果链接是动态添加的，请使用事件委托，将事件绑定到静态父元素上，例如 $(document).on('click', '.opener', function(){ ... });。

总结:

通过使用 jQuery 的 on('click') 事件监听器和 each() 方法，可以有效地为多个链接绑定点击事件，并在新的标签页中打开它们。关键在于为每个新标签页提供唯一的名称，以防止浏览器覆盖它们。请记住，用户体验至关重要，因此请确保您的网站不会滥用弹出窗口，并为用户提供清晰的指示。

今天关于《使用 jQuery 为多个链接创建点击事件以在新标签页中打开》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！