bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-25 19:05:14 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

导航栏中突出当前页面项

Browse Source
This commit is contained in:
小墨
2022-04-02 19:01:13 +08:00
parent 3cf3e4630e
commit 8635e5dbac
3 changed files with 55 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bookshelfplus-frontend/public/assets/stylesheets/style.css
View File

@@ -53,6 +53,9 @@ hr {
color: #fff;
margin-left: 12px;
}
.navbar-grid .grid-item .active {
border-bottom: dotted;
}
.navbar-grid .grid-item * {
margin: 0;

33
bookshelfplus-frontend/views/component/navbar.html
View File

@@ -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>

26
bookshelfplus-frontend/views/dashboard/component/navbar.html
View File

@@ -7,11 +7,9 @@
书栖网
</h1>
<% links.forEach(item=> { %>
<a href="<%= item.url %>" style="vertical-align: middle;">
<%= item.name %>
</a>
<% }); %>
<a href="javascript:logout();" style="color: grey; vertical-align: middle; float: right;">退出登录</a>
<a href="<%= item.url %>" style="vertical-align: middle;"><%= item.name %></a>
<% }); %>
<a href="javascript:logout();" style="color: grey; vertical-align: middle; float: right;">退出登录</a>
</div>
<div class="grid-item"></div>
</div>
@@ -42,4 +40,22 @@
alert("退出登录失败");
});
}
</script>
<script>
// 导航栏中突出当前页面
var group = '<%=group%>';
var page = '<%=page%>';
console.log(group, page);
// document.getElementsByTagName("a").asArray().forEach(element => {
$("a").toArray().forEach(element => {
var linkRoute = element.href.split('/').filter(s=>!!s);
if(linkRoute.length > 2) {
var linkGroup = linkRoute[linkRoute.length-2];
var linkPage = linkRoute[linkRoute.length-1];
console.log(element, linkGroup, linkPage);
if(page == linkPage) {
$(element).addClass("active");
}
}
});
</script>