HTML 按钮单击在新选项卡中打开 2 个链接

Question

我在前端有这些按钮，一次只能看到一个。 .btn-active 隐藏按钮。

<a href="https://example.com/shop/" target="_blank" id="starter-monthly" class = "package1">Buy Now</a>
<a href="https://example.com/shop/" target="_blank" id="starter-yearly" class = "package2 btn-active">Buy Now</a>

单击按钮时，我想通过在 jquery 的 href 中连接包 ID 来打开包链接。

jQuery('#starter-monthly').on('click', function(e) {
        var href = jQuery(this).attr('href');
         window.open(href + '?package='+24);
});
    jQuery('#starter-yearly').on('click', function(e) {
        var href = jQuery(this).attr('href');
         window.open(href + '?package='+27);
});

但是当我点击按钮时，它会在 2 个单独的选项卡中打开 2 个链接，分别是 https://example.com/shop?packag=24 和 https://example.com/shop/

我只想打开一个链接，即https://example.com/shop?packag=24

我做错了什么？有什么解决办法吗？

Answer 1

单击锚元素（a 标记）指示浏览器打开链接。拥有target 属性进一步告诉浏览器在新窗口/选项卡中打开它。现在您的代码捕获点击事件并显式打开一个新窗口（带有正确的 url）。但是，这并不能阻止浏览器执行针对所有“锚”标签的原始操作。

基本上，您会看到两个选项卡打开，因为一个是由您的代码打开的，另一个是由于单击锚标记而由浏览器打开的。您可以通过在传递给您的处理程序的事件对象上调用 preventDefault 来抑制默认浏览器行为。你的代码应该是这样的：

jQuery('#starter-monthly').on('click', function(e) {
        e.preventDefault();
        var href = jQuery(this).attr('href');
        window.open(href + '?package='+24);
});

jQuery('#starter-yearly').on('click', function(e) {
        e.preventDefault();
        var href = jQuery(this).attr('href');
        window.open(href + '?package='+27);
});