jQuery: Set highlighted menu item as active page in the menu and submenu:

Posted by: Kathirvel K on: January 31, 2014

• In: Uncategorized
• Leave a Comment

HTML:
<ul id=”topnav”>
<li><a href=”#”>Home</a>
<ul>
<li><a href=”home.html”>Submenu</a></li>
<li><a href=”Submenu1.html”>Submenu1</a></li>
<li><a href=”Submenu2.html”>Submenu2</a></li>
</ul>
</li>
<li><a href=”#”>Nav 2</a>
<ul>
<li><a href=”nav2.html”>Nav2</a></li>
<li><a href=”Submenu3.html”>Submenu3</a></li>
<li><a href=”Submenu4.html”>Submenu4</a></li>
</ul>
</li>
</ul>

jQuery Script:
<script type=”text/javascript”>
$(document).ready(function() {
//
$(‘#topnav ul li’).each(function () {
if (window.location.href.indexOf($(this).find(‘a:first’).attr(‘href’)) > -1) {
$(this).closest(‘ul’).closest(‘li’).attr(‘class’,’active’)
$(this).addClass(‘active’).siblings().removeClass(‘active’);
}
});
//
});
</script>

CSS:
#topnav li.active {background:#222; color:#fff;}
#topnav ul li.active a{ background:#007dba none; color:#fff; }

Tags: javascript, jQuery