[jquery] li에 동적으로 css적용하기

원하는 페이지 예시

반복문으로 불러온 데이터를 li태그에 적용을 하고있는데,
위의 사진처럼 선택한 항목에 대해서는 "active"라는 class명을 가진 css가 적용되기를 바람.

방법

html

<div class="test">
	<ul>
	<c:forEach items="${list }" var="result" varStatus="status">
		<li>
			<a href="#">${result.name }</a>
		</li>
	</c:forEach>
	</ul>
</div>

script

/* 클릭시 li class에 active 추가 */
	$(".test ul li").on("click",function(e){
		var el = $(e.target).closest('li');
      	// 다른 active되어있는 li의 class를 제거
		el.siblings('li').removeClass("active");
		el.addClass("active");
	});

참고자료

https://okky.kr/articles/818950