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; display: inline;">书栖网</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 class="narrowHide" href="/category">分类</a>
            <a id="dashboard" href="/login">登录</a>
        </div>
        <div class="grid-item"></div>
    </div>
</div>
<script>
    if (localStorageUtils.getLoginStatus()) {
        $("#dashboard").html("后台");
    }

    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>