wiki:javascript:jstl:메뉴_클릭시_이벤트_발생

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:javascript:jstl:메뉴_클릭시_이벤트_발생 [2020/02/15 18:21]
jhgong
+++ wiki:javascript:jstl:메뉴_클릭시_이벤트_발생 [2023/01/13 18:44] (현재)
@@ 줄 9: / 줄 9: @@
 ===== function =====
-<script>
-			$(function ()
+○ 메뉴 클릭시 해당 Navigation bar를 HighLighting 시키려면 다음과 같은 방식을 사용한다.
-			{
-				setNavigation();
+<code javascript>
+	setNavigation();
-				// 메뉴 클릭시 이벤트 발생
+	// 메뉴 클릭시 이벤트 발생
-				$("ul.snb li a").on('click', function() {
+	$("ul.snb li a").on('click', function() {
-					$(this).parent().siblings().children('a').removeClass('on');
+		$(this).parent().siblings().children('a').removeClass('on');
-					$(this).addClass('on');
+		$(this).addClass('on');
-					/* 추가 작업 */
+		/* 추가 작업 */
-				});
+	}
-			});
+</code>
-</script>
+○ 만약 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 이벤트발생}}

/volume1/web/dokuwiki/data/attic/wiki/javascript/jstl/메뉴_클릭시_이벤트_발생.1581758477.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)