时间戳

首页 > 解决方案 > 当某些按钮处于活动状态时更改链接

javascript - 当某些按钮处于活动状态时更改链接

问题描述

我的页面上有一个链接到另一个网站的按钮，但我在同一页面上也有多个按钮。我希望当一个按钮处于活动状态而其他按钮不处于活动状态时，链接会发生变化。因此，每个链接对于该按钮都是唯一的，但仅在它处于活动状态时才有效，而另一个链接则无效。我怎么能这样做？

标签： javascripthtmlcss

解决方案

基本上，您必须确保以下几点：

  1. 单击大小按钮时，它应该具有活动的背景颜色。之前单击的任何其他按钮将不再处于活动状态。

  2. 当您单击“购买”按钮时，每个尺寸按钮都会更改链接位置。

理念：

这个想法是默认添加 a.wrap并且您希望将<a href>标签包裹在button.

在我的示例中，您还想添加一个类.active。这个类也将被添加。

但是，当您单击其他按钮时，所有这些都必须从前一个按钮中删除。

因此，默认情况下，在添加类之前并且在使用链接包装购买按钮之前，您希望将其删除（即使它不存在，默认情况下先删除然后添加）。

试试这个：

$(document).ready(function(){

    $( "#size-8" ).click(function() {
     $("purchase").unwrap();
     $("#purchase").wrap( "<a href='https://www.w3schools.com' target='_blank'></a>");
     $("button").removeClass("active");
     $(this).addClass("active");
    });
  
  $( "#size-9" ).click(function() {
     $("purchase").unwrap();
     $("#purchase").wrap( "<a href='https://www.google.com' target='_blank'></a>");
     $("button").removeClass("active");
     $(this).addClass("active");
    });

});
.active {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="size-8">Size 8</button>
<button id="size-9">Size 9</button>

<br>

<button id="purchase">Purchase</button>

要查看结果，请转到JSFiddle并单击运行。

推荐阅读