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:
VIDEO
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.
Also published on Medium .
