Tambahkan kelas active pada menu yang sedang aktif (menu dengan nilai href yang sama dengan URL pada Address bar):
JQuery

$(function() {
var path = window.location.href; // Mengambil data URL pada Address bar
$(‘nav a’).each(function() {
// Jika URL pada menu ini sama persis dengan path…
if (this.href === path) {
// Tambahkan kelas “active” pada menu ini
$(this).addClass(‘active’);
}
});
});

CSS

nav {
font:normal 14px Impact,Arial,Sans-Serif;
text-transform:uppercase;
}

nav ul {
list-style:none;
border:1px solid #1D4ABE;
margin:0px 0px;
padding:0px 0px;
background:#222;
-webkit-box-shadow:0px 1px 2px #000;
-moz-box-shadow:0px 1px 2px #000;
box-shadow:0px 1px 2px #000;
overflow:auto;
}

nav li {
display:inline;
float:left;
}

nav li a {
display:block;
text-decoration:none;
padding:10px 15px;
background:#222;
color:#ccc;
text-shadow:0px 1px 1px rgba(0,0,0,0.8);
}

nav li a:hover {background:#333;text-decoration:none;}
nav li a.active {background:#1D4ABE;color:#fff;}

Lihat Demo

Pembaharuan: Versi JavaScript murni
JavaScript

function currentNav(navId) {
var current = window.location.href.split(‘#’)[0],
nav = document.getElementById(navId),
navItem = nav.getElementsByTagName(‘a’);
for(var i = 0; i < navItem.length; i++) {
// Jika nilai atribut href pada salah satu array tautan = URL address bar…
if(navItem[i].href == current || navItem[i].href == decodeURIComponent(current)) {
// Tambahkan kelas ‘active’ pada tautan tersebut
navItem[i].className = “active”;
}
}
} currentNav(‘navigation’); // Terapkan fungsi ‘currentNav()’ pada navigasi dengan id=”navigation”

HTML

Detail CSS

#navigation a.active {
color:red;
font-weight:bold;
}

Sumber: Stackoverflow – A Better Idea to Add Active Class to Menu Item