Close

add class jquery

Add Active Navigation Class to Menu Item Based on URL Using jQuery

In this jQuery tutorial, you’ll learn how to add an active class to a menu item based on the page URL using jQuery… so you can highlight that menu item. You’ll learn:

  • how use the jQuery addClass() method
  • how to get the current page’s URL path in JavaScript
  • how to split a URL in an array of parts
  • how to use the JavaScript pop() method
  • how to target an element based the value of a specified attributed using jQuery

Watch the tutorial below:

Links mentioned in the video:

Here’s the code I used in the video:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>About</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Contact</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Active Class</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="ohdangitsweird.php">Eek!</a></li>
</ul>
</nav>
<h1>Keep Calm and jQuery On!</h1>
</body>
</html>

jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();

// Account for home page with empty path
if ( path == '' ) {
path = 'index.php';
}

var target = $('nav a[href="'+path+'"]');
// Add active class to target link
target.addClass('active');
});

html, body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}

nav {
background: #000;
color: #fff;
}

nav a {
color: #fff;
text-decoration: none;
}

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

nav ul li {
display: inline-block;
margin-right: -5px;
}

nav ul li a {
display: block;
padding: 10px 15px;

}

nav ul li a:hover,
nav ul li a.active {
background: #555;
}

If you get value from this code snippet, please consider sharing it with another developer or group who could benefit from it.

September 20, 2015