[Spring Boot] header 메뉴 선택 시 jquery로 class 값 변경하기

안녕하세요. hia의 개발 story입니다.

 

header를 만들고 나니 생기는 문제가 있었습니다. 

기존 페이지는 페이지별로 header 코딩이 되어있었기 때문에

해당 페이지를 누르면 그에 해당하는 메뉴에 current라는 클래스를 넣어줬습니다.

하지만 header를 분리하게 되면 어떤 페이지에서 header를 불렀는지 알 수가 없어서 선택된 메뉴를 표시해줄 수가 없습니다. 

이제 그 부분을 script로 적용하여 변하게 하려고 합니다. 

 

아래의 사진처럼 페이지에는 메인, 소개, 예약, 숙박, 문의 이렇게 다섯 가지의 메뉴가 있습니다.

그 메뉴 중 현재 선택된 메뉴는 메인입니다. 

선택된 메뉴를 빨갛게 만드는 것은 main.css에 미리 설정된 스타일로 클래스명이 current인 li 태그에 설정된 스타일입니다. 

이제 기존에 만들어진 head 파일에서 태그값을 식별하기 위해 각각의 메뉴에 id값을 넣어줍니다. 

 

<nav id="nav">
    <ul>
        <li id="mainHead"><a href="/">메인</a></li>
        <li id="introHead"><a href="/intro">소개</a></li>
        <li id="reserveHead"><a href="/reservation">예약</a></li>
        <li id="roomHead"><a href="/roomInfo">숙박</a></li>
        <li id="faqHead"><a href="/faq">문의</a></li>
    </ul>
</nav>

 

이제 각 페이지에 들어가서 스크립트를 설정해주면 됩니다.

현재 current인 클래스의 current 값은 없애주고 각 페이지에 맞는 메뉴의 id에는 current라는 클래스를 추가해줍니다. 

 

<script>

    $('document').ready(function(){
        $('.current').removeClass("current");
        $('#introHead').addClass("current");
    });

</script>

---

jquery를 이용하여 class 값 추가/삭제 하는 방법 

1. 태그의 id값이나 class값을 이용하여 class 추가/삭제하는 방법 

$('#id').removeClass('삭제할 클래스명');

$('#id').addClass('추가할 클래스명');

 

2. 태그의 class값을 변경하는 방법 

$('#id').attr('기존 클래스명', '변경할 클래스명');