메뉴 클릭시 이벤트 발생

  • description : jstl 메뉴 클릭시 이벤트 발생시키기
  • author : 천호동밤안개
  • email : jhgong@repia.com
  • lastupdate : 2020-02-15

function

○ 메뉴 클릭시 해당 Navigation bar를 HighLighting 시키려면 다음과 같은 방식을 사용한다.

	setNavigation();
 
	// 메뉴 클릭시 이벤트 발생
	$("ul.snb li a").on('click', function() {
		$(this).parent().siblings().children('a').removeClass('on');
		$(this).addClass('on');
 
		/* 추가 작업 */
	}

○ 만약 URL이 바뀌어서 해당 디렉토리 안에 있을 때 HighLighting을 유지할수 없는 경우

	var path = window.location.pathname;
	path = path.replace(/\/$/, "");
	path = decodeURIComponent(path);
 
	/* contextRoot */
	var endIdx = path.indexOf('/', 1);
	var contextRoot = path.substring(0, endIdx); // contextRoot
	var depth1Root = path.substring(0, endIdx);  // 1-th Root
 
	if(path.indexOf('/', contextRoot.length + 1)>=0)
	{
		endIdx = path.indexOf('/', contextRoot.length + 1);
		depth1Root = path.substring(0, endIdx);
	}
	// console.log(path, contextRoot, depth1Root);
	// console.log(path);
	$("ul.snb li a").each(function() {
		var href = $(this).attr('href');
		// console.log(href);
		if(href.indexOf(depth1Root)===0)
		{
			$(this).addClass('on');
		}
	}

○ 이와같이 ' indexOf ' 혹은 ' lastIndexOf ' 를 사용해 적절하게 URL을 수정하는 방식을 사용한다.