2012-04-24 103 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> 

资产净值有 “关于我们” 一节一subnav。

我希望“关于我们”链接收到“活动”类,以便它在我的某个subnav页面上保持突出显示。

因此,例如,如果我在“子链接2”页面上,关于我们链接被赋予活动类。

任何人都可以在正确的方向指向我吗?

感谢您的帮助

回答

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  
} 
相关问题