所以，假设有四项立法即将出台，涉及教育、避孕或LGBTQ权利。为了更容易地让人们了解这些法案的内容，我想根据它们的主要主题或问题突出显示它们。每个问题都有一个按钮，点击教育按钮应该会使与教育无关的法案褪色，等等。
其中一项法案涉及教育和避孕，所以如果点击所有三个按钮或只点击LGBTQ按钮，它应该淡出。
下面是我的代码，它适用于单期票据，但如果用户试图选择多期票据，就不行了。

<div class=buttons>
<button id="edu_button" onclick="colorchange('edu_button')" style="background:black; color:white;" issue="education">Education</button>
<button id="ca_button" onclick="colorchange('ca_button')" style="background:black; color:white;" issue="contraception">Contraception</button>
<button id="lgbtq_button" onclick="colorchange('lgbtq_button')" style="background:black; color:white;" issue="lgbtq">LGBTQ</button>
</div>
<br/>
<div class="bill" issue="education">HB 101 (Education bill)</div>
<div class="bill" issue="contraception">HB 102 (Contraception bill)</div>
<div class="bill" issue="lgbtq">HB 103 (LGBTQ bill)</div>
<div class="bill" issue="education contraception">HB 104 (Bill that involves education and contraception)</div>

function colorchange(id) {

    var background = document.getElementById(id).style.backgroundColor;
    if (background == "black") {
        document.getElementById(id).style.background = "#ec0d7d";
    } else {
        document.getElementById(id).style.background = "black";
    }

}

const buttons = document.querySelectorAll('.buttons');
  const bills = document.querySelectorAll('.bill');

   const hide = function(evt){
    bills.forEach(function(d){
       if(evt.target.getAttribute('issue') != d.getAttribute('issue')) d.classList.toggle('fade');

    });
  }

  buttons.forEach(function(d){ 
    d.onclick = hide; 
  })

.fade{
   opacity: 0.2;
}

http://jsfiddle.net/96ohjm5d/3/