○ 메뉴 클릭시 해당 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을 수정하는 방식을 사용한다.