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

차이

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

차이 보기로 링크

--- wiki:javascript:jstl:메뉴_클릭시_이벤트_발생 [2020/02/15 18:33]
jhgong
+++ wiki:javascript:jstl:메뉴_클릭시_이벤트_발생 [2023/01/13 18:44] (현재)
@@ 줄 12: / 줄 12: @@
 ○ 메뉴 클릭시 해당 Navigation bar를 HighLighting 시키려면 다음과 같은 방식을 사용한다.
+<code javascript>
+	setNavigation();
-				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>
 ○ 만약 URL이 바뀌어서 해당 디렉토리 안에 있을 때 HighLighting을 유지할수 없는 경우
+<code javascript>
+	var path = window.location.pathname;
-				var path = window.location.pathname;
+	path = path.replace(/\/$/, "");
-				path = path.replace(/\/$/, "");
+	path = decodeURIComponent(path);
-				path = decodeURIComponent(path);
-				/* contextRoot */
+	/* contextRoot */
-				var endIdx = path.indexOf('/', 1);
+	var endIdx = path.indexOf('/', 1);
-				var contextRoot = path.substring(0, endIdx); // contextRoot
+	var contextRoot = path.substring(0, endIdx); // contextRoot
-				var depth1Root = path.substring(0, endIdx);  // 1-th Root
+	var depth1Root = path.substring(0, endIdx);  // 1-th Root
-				if(path.indexOf('/', contextRoot.length + 1)>=0)
+	if(path.indexOf('/', contextRoot.length + 1)>=0)
-				{
+	{
-					endIdx = path.indexOf('/', contextRoot.length + 1);
+		endIdx = path.indexOf('/', contextRoot.length + 1);
-					depth1Root = path.substring(0, endIdx);
+		depth1Root = path.substring(0, endIdx);
-				}
+	}
-				// console.log(path, contextRoot, depth1Root);
+	// console.log(path, contextRoot, depth1Root);
-				// console.log(path);
+	// console.log(path);
-				$("ul.snb li a").each(function() {
+	$("ul.snb li a").each(function() {
-					var href = $(this).attr('href');
+		var href = $(this).attr('href');
-					// console.log(href);
+		// console.log(href);
-					if(href.indexOf(depth1Root)===0)
+		if(href.indexOf(depth1Root)===0)
-					{
+		{
-						$(this).addClass('on');
+			$(this).addClass('on');
-					}
+		}
-				}
+	}
+</code>
-○ 이와같이 **indexOf** 혹은 **lastIndexOf** 를 사용해 적절하게 URL을 수정하는 방식을 사용한다.
+○ 이와같이 ' **indexOf** ' 혹은 ' **lastIndexOf** ' 를 사용해 적절하게 URL을 수정하는 방식을 사용한다.

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