导航栏中突出当前页面项

bookshelfplus-frontend/views/component/navbar.html

@@ -7,7 +7,7 @@
             </nobr>
         </div>
         <div class="grid-item exnarrowHide" style="text-align: right; color: white;">
-            <a class="narrowHide" href="/">首页</a>
+            <a class="home narrowHide" href="/">首页</a>
             <a href="/search">搜索</a>
             <a href="/category">分类</a>
             <a class="narrowHide" href="/about">关于</a>
@@ -15,4 +15,33 @@
         </div>
         <div class="grid-item"></div>
     </div>
-</div>
+</div>
+<script>
+    function navbarHighlight() {
+        // 导航栏中突出当前页面
+        var route = location.pathname.split('/').filter(s=>!!s);
+        var page = route[route.length-1];
+
+        // 首页
+        if(route.length === 0) {
+            $(".home").addClass("active");
+            return;
+        }
+
+        //其他页面
+        console.log("page:", page);
+        $("a").toArray().forEach(element => {
+            var linkRoute = element.getAttribute("href").split('/').filter(s=>!!s);
+            console.log(element.href, linkRoute);
+            if(linkRoute.length > 0) {
+                var linkPage = linkRoute[linkRoute.length-1];
+                console.log(element, linkPage);
+                if(page == linkPage) {
+                    $(element).addClass("active");
+                    return;
+                }
+            }
+        });
+    }
+    navbarHighlight();
+</script>