전자상거래 웹페이지의 제품 세부정보 페이지에 색상 버튼 목록을 만들었습니다. 페이지에 들어갈 때 일치하는 색상의 li 버튼이 기본적으로 선택되기를 원합니다. 특정 색상 이름(텍스트 문자열)은 각 제품 페이지에서 확인할 수 있습니다. 다음은 내 코드를 요약한 것입니다.

      

       
 
 
 
 
 
 <스타일> .color-wrap {} .color-wrap li a {} .color-wrap li.selected a {border-color:red;} .color-wrap .ivory {#fff;} .color-wrap .beige {#eee;} .color-wrap .green {녹색;} .color-wrap .blue {파란색;}
제 생각은 JavaScript를 사용하여 "a" 태그의 클래스 이름에서 색상 이름을 찾고 검색하고 일치시키고 "selected" 클래스를 li에 추가하는 것입니다. 보시다시피 버튼 이름은 "li" 태그가 아닌 "a" 태그로 식별되어야 합니다. 나는 코딩에 대해 거의 아무것도 모른다. 
 
유사한 stackoverflow 스레드를 모두 살펴봤지만 해결책을 찾을 수 없었습니다. 저를 도와주세요:(
 
지금까지 일치, 찾기, 필터 기능을 시도했지만 모두 실패했습니다.