현재 메뉴를 하이라이트 처리하기

spring

tomcat

tiles

사용중

 

뭐 이렇게 메뉴를 누를때 그 화면에 해당하는 메뉴를 하이라이트 시켜보자.

 

---

이렇게 버튼을 대충 만들고

 

---

 

 

스크립트로 쿼리스트링을 보내서 컨트롤러에서 해당 param을 받아, 그걸로 Class에 active를 시키는 방식으로 구현

 

key = value 형식이고 

key = > pageName

value = > test11 , test22

 

여기 코드의 부가 설명을 조금 하자면,

var pageName은 받아온 value고

아래의 removeClass는 현재 div에 있는 class를 지우고,

addClass를 사용하여 새 클래스를 붙여주는것.

 

밑의 btn 클릭 함수는

해당 버튼을 클릭하면, 그 버튼의 id 값을 추출해서 pageSubmitFn 함수에 값을 넣는것이다.ㅇㅇ

 

<script>

    let pageSubmitFn = function (menu) {

        if (menu === 'datatable') {
            // location.href = '/datatable'
            location.href = '/datatable?pageName=datatable'

        } else if (menu === 'test11') {

            location.href = '/test11?pageName=test11'

        } else if (menu === 'test22') {

            location.href = '/test22?pageName=test22'

        }

    }
    $(document).ready(function () {

        $(".btn").removeClass("active");

        var pageName = "<c:out value='${param.pageName}' />";

        $("#" + pageName).removeClass("btn-dark");
        $("#" + pageName).addClass("btn-light active");

        $(".btn").click(function () {

            console.log(this);

            var menu = $(this).attr("id");

            console.log(menu);

            pageSubmitFn(menu);

        })

    })

</script>

 

---

HttpServletRequest 를 사용하여 해당 값을 받고,

컨트롤러에서 sout 으로 값을 확인해보자

tiles를 사용하지 않으면 .tiles를 붙이지 말자

---

그럼 2만

---

https://elvis-note.tistory.com/entry/Spring-MVC-%EB%A9%94%EB%89%B4-%EB%B0%94-%ED%95%98%EC%9D%B4%EB%9D%BC%EC%9D%B4%ED%8A%B8-%EC%B2%98%EB%A6%AC

[Spring MVC] 메뉴 바 하이라이트 처리 1 - location.href 이용

 

 

 

******** 해당 페이지 로드 시 session 에 해당페이지의 고유 값을 적용,

해당페이지의 메뉴바 class에 class append 같은 걸 사용해서 active 를 조건식에 맞춰서 넣으면 더 간단