bookshelfplus/bookshelfplus-frontend/views/component/navbar.html

<div class="navbar">
    <div class="navbar-grid">
        <div class="grid-item"></div>
        <div class="grid-item">
            <nobr>
                <h1 onclick="location.href='/'" style="cursor: pointer;">书栖网</h1>
            </nobr>
        </div>
        <div class="grid-item exnarrowHide" style="text-align: right; color: white;">
            <a class="home narrowHide" href="/">首页</a>
            <a href="/search">搜索</a>
            <a href="/category">分类</a>
            <a class="narrowHide" href="/about">关于</a>
            <a class="narrowHide" href="/login">登录</a>
        </div>
        <div class="grid-item"></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>