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

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>