문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== 메뉴 클릭시 이벤트 발생 ======
<WRAP left notice 80%>
  * description : jstl 메뉴 클릭시 이벤트 발생시키기
  * author      : 천호동밤안개
  * email       : jhgong@repia.com
  * lastupdate  : 2020-02-15
</WRAP>
<WRAP clear/>

===== function =====

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

<code javascript>
	setNavigation();
				
	// 메뉴 클릭시 이벤트 발생
	$("ul.snb li a").on('click', function() {
		$(this).parent().siblings().children('a').removeClass('on');
		$(this).addClass('on');
					
		/* 추가 작업 */
	}
</code>
○ 만약 URL이 바뀌어서 해당 디렉토리 안에 있을 때 HighLighting을 유지할수 없는 경우
<code javascript>
	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');
		}
	}
</code>
○ 이와같이 ' **indexOf** ' 혹은 ' **lastIndexOf** ' 를 사용해 적절하게 URL을 수정하는 방식을 사용한다.





{{tag>천호동밤안개 jstl 이벤트발생}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구