Tambahkan Kelas 'Active'/'Current' Pada Sajian Menurut Url Pada Address Bar

Published by Concept Phone Jumat, 11 Januari 2019

Tambahkan kelas active pada sajian 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 kafetaria     $('nav a').each(function() {         // Jika URL pada sajian ini sama persis dengan path...         if (this.href === path) {             // Tambahkan kelas "active" pada sajian 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=' '>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

Sumber https://www.dte.web.id/