当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 jQuery 为多个链接创建点击事件以在新标签页中打开

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

2025-11-20 15:09:26 0浏览收藏

学习知识要善于思考，思考，再思考！今天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>

注意事项: