我使用以下 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>
导航有一个“关于我们”部分的子导航。
我想让“关于我们”链接接收“活动”类,以便当我位于其子导航页面之一时它保持突出显示。
例如,如果我在“子链接 2”页面上,则“关于我们”链接将被赋予一个活动类。
有人能在这里指出正确的方向吗?
感谢您的帮助
尝试下面的代码,
// 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
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)