Question

我有3个按钮

<li><a class="btn btn-sm mb-3 getnowbutton getnowbutton1" href="#" data-toggle="tab">3 Months</a></li>
        <li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">6 Months</a></li>
        <li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">1 Year</a></li>

我想保持单击的按钮处于活动状态，直到单击另一个按钮为止，但是仅对这3个按钮有效，而不会影响所有网页按钮。

我尝试过

.getnowbutton1:focus{
background-color: white;
color: red;}

但是，当我单击页面上的任意位置时，它将不再关注。

有什么想法吗？

Answer 1

您可以创建一个名为active的类，并使用jquery将该类添加到单击的链接中（并从其他链接中删除）。

请参见以下工作片段：

$(document).ready(function(){
  $('.getnowbutton').click(function(){
    $('.getnowbutton').removeClass('active');
    $(this).addClass('active');
  });
});

.active {
  background-color: white;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li><a class="btn btn-sm mb-3 getnowbutton getnowbutton1" href="#" data-toggle="tab">3 Months</a></li>
<li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">6 Months</a></li>
<li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">1 Year</a></li>

保持该按钮处于活动状态，直到我单击另一个按钮（不影响所有网站按钮）

1 个答案: