Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar

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');
        }
    });
});

HTML

<nav>
    <ul>
        <li><a href='http://www.aa.com'>Beranda</a></li>
        <li><a href='http://www.bb.com'>Arsip</a></li>
        <li><a href='http://www.cc.com'>Tentang</a></li>
        <li><a href='http://sekaratmutlak.blogspot.com/2012/01/active-menu.html'>Komentar</a></li>
        <li><a href='http://www.ee.com'>Kontak</a></li>
    </ul>
</nav>

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

<nav id="navigation">
   ...
   ...
</nav>

Detail CSS

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

---

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