使用 Jquery 在导航菜单中突出显示父链接 [英] Highlight Parent Link in Navigation Menu With Jquery

问题描述

我正在使用以下 Jquery 在导航中突出显示当前页面的链接.

I'm using the following Jquery to highlight the link for the current page in my navigation.

// 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>

导航有一个关于我们"部分的子导航.

The nav has a subnav for the "About Us" section.

我想让关于我们"链接接收活动"类，以便当我在其子导航页面之一上时它保持突出显示.

I'd like to have the "About Us" Link receive the "active" class so it stays highlighted when I'm on one of its subnav pages.

例如，如果我在子链接 2"页面上，则关于我们"链接会被赋予一个活动类.

So for example, if I'm on the "Sub Link 2" page, the About Us link is given an active class.

任何人都可以在这里指出正确的方向吗?

Can anyone point me in the right direction here?

感谢您的帮助

推荐答案

试试下面的代码，

// 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    
}

这篇关于使用 Jquery 在导航菜单中突出显示父链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！