2012-04-24 5 views
4

내 탐색에서 현재 페이지의 링크를 강조 표시하려면 다음 Jquery를 사용하고 있습니다.하이라이트 Jquery로 탐색 메뉴의 상위 링크

// Add Active Class To Current Link 
var url = window.location; // get current URL 
$('#nav a[href="'+url+'"]').addClass('active'); 

내 탐색은 다음과 같습니다

<nav> 
    <ul id="nav"> 
    <li><a href="">Home</a></li> 
    <li><a href="">About Us<b class="caret"></b></a> 
     <ul> 
     <li><a href="">Sub Link 1</a></li> 
     <li><a href="">Sub Link 2</a></li> 
     <li><a href="">Sub Link 3</a></li> 
     </ul> 
    </li> 
    <li><a href="">Products</a></li> 
    <li><a href="">Contact</a></li> 
    </ul> 
</nav> 

순자산 가치 (NAV)는 "회사 소개"섹션에 대한 subnav 있습니다.

나는 "회사 소개"링크가 "활성"클래스를 수신하도록하고 싶습니다. 그래서 서브 나노 페이지 중 하나에있을 때 강조 표시됩니다.

예를 들어, "Sub Link 2"페이지에있는 경우 About Us 링크에 활성 클래스가 제공됩니다.

누구나 올바른 방향으로 나를 가리킬 수 있습니까? 당신의 도움이 코드 아래

답변

5

시도에 대한

감사합니다,

// Add Active Class To Current Link 
var url = window.location; // get current URL 
$('#nav a[href="'+url+'"]').addClass('active'); 

var $activeUL = $('.active').closest('ul'); 
/* 
Revise below condition that tests if .active is a submenu 
*/ 
if($activeUL.attr('id') != 'nav') { //check if it is submenu 
    $activeUL 
     .parent() //This should return the li 
     .children('a') //The childrens are <a> and <ul> 
     .addClass('active'); //add class active to the a  
} 
관련 문제