JavaScriptでの要素のアクティベーション
空のセルを持つHTMLテーブル #table があるとします。
任意のセルをクリックすると、それが何らかの方法でアクティベートされるようにしましょう。 例えば、背景色が赤くなります。このために、アクティブなセルにはあるCSSクラスを付与します:
.active {
background: red;
}
アクティベーションを実装しましょう:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.addEventListener('click', function() {
this.classList.add('active');
});
}
HTMLリスト ul があります。任意のリスト項目をクリックすると、
それが赤い背景色でアクティブになるようにしてください。
前のタスクを変更し、すでにアクティブなリスト項目をクリックすると、 そのアクティベーションが解除されるようにしてください。