사용자 도구

사이트 도구


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/메뉴_클릭시_이벤트_발생.1581759420.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)