javascript - 一旦我们使用 css 单击单个按钮，如何更改其他两个按钮的不透明背景颜色

Question

您好，我有三个按钮，如果我单击一个按钮，其他两个按钮的背景颜色不透明度应为 40%。以同样的方式，单击其他按钮时它应该相应地改变。提前致谢。 Here is my jsfiddle link

HTML:

<div class="form-group has-feedback ng-scope">                      
 <a href="#"  class="btn btn- newbutton7"><strong style="text-align:center;font-size:17px;font-family: sans-serif;margin-left:-4px;">Annual Compensation</strong></a>
 <a href="#"  class="btn btn- newbutton8"><strong style="text-align:center;font-size:17px;font-family: sans-serif;">Monthly Payslips</strong></a>
 <a href="#"  class="btn btn- newbutton9"><strong style="text-align:center;font-size:17px;font-family: sans-serif;margin-left:-8px;">Investment</strong></a>
 </div>

CSS:

.btn.btn-.newbutton7{

width: 197px;
height: 41px;
margin-top: 56px;

background-color:#01cd27;
color: white;
border-radius: 0px;
font-family: sans-serif;
font-size:15px;
}
.btn.btn-.newbutton8{    
width: 197px;
height: 41px;
margin-top: 56px;   
background-color:#f8b100;
color: white;
border-radius: 0px;
font-family: sans-serif;
font-size:15px;
}
.btn.btn-.newbutton9{    
width: 197px;
height: 41px;
margin-top: -64px;    
background-color:#6b01cd;
color: white;
border-radius: 0px;
font-family: sans-serif;
font-size:15px;
}

Answer 1

试试下面的 jquery 代码:

$('.has-feedback a').click(function(){
$(this).css('opacity',1);
$('.has-feedback a').not(this).css('opacity',0.4);
});

演示:https://jsfiddle.net/xd17xyrm/

或:

CSS:

.opacty {
  opacity:0.4;
}

js:

$('.has-feedback a').not('.has-feedback a:first').addClass('opacty');

$('.has-feedback a').click(function(e){
$('.has-feedback a').not(this).addClass('opacty');
 $(this).removeClass('opacty');

});

演示:https://jsfiddle.net/xd17xyrm/1/