Skip to content

Instantly share code, notes, and snippets.

@johnmorris

johnmorris/about.php

Created September 20, 2015 18:05
Show Gist options
  • Save johnmorris/b522257ae204d95ebcbe to your computer and use it in GitHub Desktop.
Save johnmorris/b522257ae204d95ebcbe to your computer and use it in GitHub Desktop.
Download ZIP
Add active class to navigation menu item based on URL using jQuery
Raw
about.php
<!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>
Raw
contact.php
<!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>
Raw
index.php
<!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>
Raw
ohdangitsweird.php
<!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>
Raw
script.js
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');
});
Raw
style.css
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;
}
@ribhu69
Copy link

ribhu69 commented Apr 17, 2021

worked like a charm!! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment