Kathirvel K

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

Posted on: January 31, 2014

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

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) {

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: