메뉴 active 기능 따라하기

1. jsp에서 태그가 a태그로 href 이동할때

<li class="nav-item dropdown">
  <a class="signup nav-link fw-bold fs-5" href="<%=request.getContextPath()%>/teacher/signup" id="offcanvasNavbarDropdown" role="button" aria-expanded="false" >
  회원가입
  </a>     
</li>

보면 class에 signup 클래스명이 추가되어있음. 밑에를 진행하기 위해서

<script>
  $(function(){
    var str = location.pathname; //URI 경로 끝까지 
    var contextPath = '<%=request.getContextPath()%>'; //기본도메인까지 (예: naver/) 까지
    str = str.substring(contextPath.length+1); //기본도메인 뒤 1자리부터 추출
    
    if(str.indexOf('student/') == 0){ // 도메인/student 의경로로 이뤄져있는지 확인
    	$('.student').addClass('active'); //뒤에 해당 코드 클레스이름에 student 추가해놓을 것
    }else if(str.indexOf('lesson/') == 0){
    	$('.lesson').addClass('active');
    }else if(str.indexOf('board/') == 0){
    	$('.board').addClass('active');
    }else if(str.indexOf('teacher/signin') == 0){
    	$('.signin').addClass('active');
    }else if(str.indexOf('teacher/signup') == 0){
    	$('.signup').addClass('active');
    }else if(str.indexOf('teacher/mypage') == 0){
    	$('.mypage').addClass('active');
    }
  })
</script>

 

 

2. jsp에서 a태그 href속성을 이용할 수 없을 때

jsp에서 이동이 필요한 곳에 클래스명을 각각 CS notice free 추가해두기

<script type="text/javascript">
	var contextPath = '<%=request.getContextPath()%>';
	$(function(){
		var type = '${cri.boardType}';
		$('.'+type).prop('checked', true);
	})
	$(function(){
		$('.btn-check').click(function(){
			if($(this).hasClass('CS')){
				location.href = contextPath + "/CS/board/list";
			}
			if($(this).hasClass('notice')){
				location.href = contextPath + "/board/list?boardType=notice";
			}
			if($(this).hasClass('free')){
				location.href = contextPath + "/board/list?boardType=free";
			}
		})
	})
</script>

- 아래의 function을 위에있는 function으로 대체할 수 있음 

$(function(){
	var str = location.pathname;
	str = str.substring(contextPath.length+1); //기본도메인 뒤 1자리부터 추출		    
	if(str.indexOf('CS/') == 0){ // 도메인/student 의경로로 이뤄져있는지 확인
		$('.CS').attr('checked','checked'); //뒤에 해당 코드 클레스이름에 student 추가해놓을 것
	}else if(str.indexOf('boardType=free') == 0){
		$('.free').attr('checked','checked');
	}else if(str.indexOf('boardType=notice') == 0){
		$('.notice').attr('checked','checked');
	}
})