Changing Active Link Color

This article is going to demonstrate how to change active link color of a currently visited web page.

Demo

This is how our final navigation bar with active link color will look. You can customize it for your own need.

Home
About Us
Contact Us

Concepts

Once in a while we all (as a developer) have tried to change the color of an active link using CSS. You must have used a:active property to change the color of active link but you didn't get what you expected. Right? After clicking on the link, as soon as your web page gets refreshed and loaded, your link color change momentarily and then back to the same initial color. There is a lot of confusion for this property. It doesn't seem that easy to change the color of an active link as expected.

I'm going to show you a little trick. I'll use JQuery to change the color of active links. Here are the steps. First I'll create a class using CSS defining rules for active link color and its value. Then, I'll get the URL of currently opened web page using 'window.location.href'. After that I'll remove the class '.selected' created in first step if present on some HTML element, then add the class '.selected' to all the links similar to the currently opened URL present of the web page.

To create menu I'm using the same simple horizontal bar added previously in showcase tutorials. You can find it over HERE. Its very easy. Check out the code.

Code

Finally here's all the code that you need. Save all the files in same folder. File names have been written above the code. I have created a folder in my C: drive named 'showcase'. Inside it I have placed all my files. For using JQuery I'm using CDN hosted by google. Also please mention the whole path within anchor tag. Since I'm saving all my files in C: drive I have used 'file:///C:/showcase/...' path inside href attribute.

home.htm

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="changeLinkColor.js"></script>
</head>
<body>
<h1>Changing Active Link Color - Syntax Page</h1>
<ul class="holder">
<li><a href="file:///C:/showcase/home.htm" class="mymenu">Home</a></li>
<li><a href="file:///C:/showcase/about.htm" class="mymenu">About Us</a></li>
<li><a href="file:///C:/showcase/contact.htm" class="mymenu">Contact Us</a></li>
</ul>
<h2>Home Page</h2>
<p>This is my home page.</p>
<p>Check the home link color on the menu above.</p>
</body>
</html>

about.htm

<!DOCTYPE html>
<html>
<head>
    <title>About-Us Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="changeLinkColor.js"></script>
</head>
<body>
<h1>Changing Active Link Color - Syntax Page</h1>
<ul class="holder">
<li><a href="file:///C:/showcase/home.htm" class="mymenu">Home</a></li>
<li><a href="file:///C:/showcase/about.htm" class="mymenu">About Us</a></li>
<li><a href="file:///C:/showcase/contact.htm" class="mymenu">Contact Us</a></li>
</ul>
<h2>About Us</h2>
<p>This is my about us page.</p>
<p>Check the about us link color on the menu above.</p>
</body>
</html>

contact.htm

<!DOCTYPE html>
<html>
<head>
    <title>Contact-Us Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="changeLinkColor.js"></script>
</head>
<body>
<h1>Changing Active Link Color - Syntax Page</h1>
<ul class="holder">
<li><a href="file:///C:/showcase/home.htm" class="mymenu">Home</a></li>
<li><a href="file:///C:/showcase/about.htm" class="mymenu">About Us</a></li>
<li><a href="file:///C:/showcase/contact.htm" class="mymenu">Contact Us</a></li>
</ul>
<h2>Contact Us</h2>
<p>This is my contact us page.</p>
<p>Check the contact us link color on the menu above.</p>
</body>
</html>

style.css

.holder
{
	margin:0;
	padding:0;
	list-style-type:none;
	overflow:hidden;
}
.mymenu
{
	background:#ff0000;
	border:2px outset #ff0000;
	color:#fff;
	float:left;
	padding:10px;
	text-align:center;
	text-decoration:none;
	width:189px;
}
a.mymenu:hover
{
	background:#0000ff;
	border:2px inset #0000ff;
}
.selected
{
	background:#0000ff;
	border:2px inset #0000ff;
}

changeLinkColor.js

$(document).ready(function()
{
	$(".holder li a").removeClass('selected');
	var currentUrl = window.location.href;
	$('.holder li a[href="' + currentUrl + '"]').addClass('selected');
})