make current page nav-item highlighted

loopbackio · Apr 17, 2020 · 92f981e · 92f981e
1 parent e501770
commit 92f981e
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/navbar-template.html b/navbar-template.html
@@ -8,7 +8,7 @@
     </button>
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav ml-auto">
+        <ul class="nav navbar-nav ml-auto">
             <li class="nav-item">
                 <a class="nav-link" href="/getting-started.html">Getting Started</a>
             </li>
@@ -33,4 +33,16 @@
         </ul>
 
     </div>
-</nav>
+</nav>
+<script>
+$(document).ready(function ($) {
+    var url = window.location.href;
+    var activePage = url;
+    $('.nav a').each(function () {
+        var linkPage = this.href;
+        if (activePage == linkPage) {
+            $(this).closest("li").addClass("active");
+        }
+    });
+});
+</script>