사용자 도구

사이트 도구


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

문서의 이전 판입니다!


메뉴 클릭시 이벤트 발생

  • 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을 수정하는 방식을 사용한다.

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