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가 주어집니다. 리스트의 어떤 항목을 클릭하면 그 항목이 빨간색 배경으로 활성화되도록 만드세요.

이전 문제를 수정하여, 이미 활성화된 리스트 항목을 클릭하면 활성화가 해제되도록 만드세요.