如何点击提交按钮时打开选中的<a>标签链接？

可以通过以下jQuery代码实现需求：

实现思路 #

• 用变量存储用户选中的链接地址
• 点击链接时阻止默认跳转行为，仅记录地址并标记选中状态
• 点击提交按钮时，根据记录的地址打开页面

完整代码 #

<ul>
  <li class="link-a"><a href="https://google.com">LINK A</a></li>
  <li class="link-b"><a href="https://yahoo.com">LINK B</a></li>
</ul>
<button type="submit">Open clicked link</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 存储选中的链接地址
let selectedLink = '';

// 绑定链接点击事件
$('ul li a').on('click', function(e) {
  // 阻止链接默认跳转行为
  e.preventDefault();
  // 记录当前点击的链接地址
  selectedLink = $(this).attr('href');
  // 给选中的链接添加高亮样式（可选，提升用户体验）
  $('ul li a').removeClass('selected');
  $(this).addClass('selected');
});

// 绑定按钮点击事件
$('button[type="submit"]').on('click', function() {
  if (selectedLink) {
    // 在新标签页打开选中的链接
    window.open(selectedLink, '_blank');
    // 若要在当前页面打开，替换为：window.location.href = selectedLink;
  } else {
    // 提示用户先选择链接
    alert('请先选择一个链接');
  }
});
</script>

<style>
/* 可选：选中链接的高亮样式 */
.selected {
  color: #ff4444;
  font-weight: bold;
  text-decoration: underline;
}
</style>

关键说明 #

• e.preventDefault()：必须添加，否则点击链接会直接跳转，无法实现后续通过按钮打开的逻辑
• 高亮样式是可选增强项，目的是让用户直观看到自己选中了哪个链接
• 按钮点击时的判断逻辑，避免用户未选链接就点击按钮的无效操作

内容的提问来源于stack exchange，提问作者Mara Barn