배열 에 element 가 7개 정도 있다...

클릭했을때 각각 다른 css 를 먹인다...


그래서 css 클래스 만들어줬다..

예로

.active_entertain { ... }

.active_sport {...}

이런식으로

그리고 자바스크립트에서 루프안에서 코드 짰다..

처음에는....

클릭된 인덱스가 0 일때 .active_entertain 삽입...

클릭된 인덱스가 1 일때 .active_sport 삽입... 

이런식으로 if 문 else if 문 해서 하고있다가....


후...... 한번 내쉬어주고....


.active_1 {
    background-color: blue;
    color: white;
}

.active_2 {
    background-color: var(--news_font_color);
    color: white;
}

.active_3 {
    background-color: var(--main_logo_color);
    color: white;
}

.active_4 {
    background-color: var(--main_logo_color);
    color: white;
}

.active_5 {
    background-color: #ffb347;
    color: white;
}

.active_6 {
    background-color: var(--news_font_color);
    color: white;
}

.active_7 {
    background-color: #003366;
    color: white;
}


for (let i = 0; i < options.length; i++) {
        options[i].addEventListener("click", function() {
            // remove active

            // apply active
            options[i].classList.add(`active_${i}`);
        });
    }


이렇게 css 이름 바꾸고 걍 한줄로 처리했다...

무식할뻔 했다...


후.......