タブ切り替えについて

Question

■HTML
<div class="sampletab" id="sampletab1">aaa</div>
<div class="sampletab" id="sampletab2">bbb</div>
<div class="sampletab" id="sampletab3">ccc</div>


<p class="sampletabs">
<a onclick="ChangeTab('sampletab1');" class="sampletab1 button">ボタン１</a>
<a onclick="ChangeTab('sampletab2');" class="sampletab2 button">ボタン２</a>
<a onclick="ChangeTab('sampletab3');" class="sampletab3 button">ボタン３</a>
</p>

■CSS
.button {
  padding: 5px;
  background:yellow;
}

■JS
ChangeTab('sampletab1');

    function ChangeTab(tabname) {
        // 全部消す
        document.getElementById('sampletab1').style.display = 'none';
        document.getElementById('sampletab2').style.display = 'none';
        document.getElementById('sampletab3').style.display = 'none';
        // 指定箇所のみ表示
        if(tabname) {
            document.getElementById(tabname).style.display = 'inline-block';
        }
    }

よくあるタブ切り替えなのですが、このJSで押されていないボタンの色をグレーにしたい場合どうすればよいでしょうか？
ご教授お願いします。

Answer 1

cssファイルの方に、.isActiveみたいな状態を表すクラスを作って、そこでボタンが選ばれてる時の色を設定しておいて、そのクラスが適用されていない場合はボタンの色がグレーになるように.buttonに設定。

あとは、jsの関数内で、ボタン要素にisActiveつけたり、外したりすればオッケーかと。

element.classList.toggle('isActive');