我正在尝试在Jekyll模板的基础上构建博客样式的网站。我目前正在编写和设置导航样式,这给我带来了两个问题。使用this question的答案,我设法在当前页面上添加了类active
,但这是仍然需要解决的问题:
首先,页面加载时,所有“标签”均处于活动状态,而不仅仅是“主页”标签:
其次,当网址比第一级导航更深时,相关的“选项卡”不再处于活动状态。以下屏幕截图的网址为[baseurl]/reviews/[name-of-post]
,但评论“标签”未激活:
我不确定如何解决第一个问题,但是对于第二个问题,我认为我需要在location.pathname中搜索相关的href,但是我需要对此进行深入研究。会根据需要进行更新,但是我已经很久没有运气了,所以我想同时发布。
以下是相关部分的代码段:
侧面导航HTML(以Liquid编写)
<nav id="side-nav">
<ul class="nav-items-list">
<li id="nav-item"><a href="{{ site.baseurl }}/"><i class="fas fa-home"></i></a></li>
{% for page in site.pages %}
<li id="nav-item">
<a href="{{ site.baseurl }}/{{ page.title | downcase }}/">
<i class="{{ page.icon }}"></i>
</a>
</li>
{% endfor %}
</ul>
</nav>
示例页面(YAML前题)
---
layout: page
title: Reviews
permalink: /reviews/
icon: "fas fa-star-half-alt"
---
jQuery的
$(function(){
var current = location.pathname;
$('#nav-item a').each(function(){
var $this = $(this);
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
希望这足够了,但是如果需要更多代码,请告诉我。所有代码也都在GitHub上可用,其中项目也是hosted on GitHub Pages。
提前致谢。
杰米
最佳答案
理论上,以下应该工作:
// Compute the closest (2-part) base path from the current location
var basePath = '/' + window.location.pathname.split('/', 3).filter(Boolean).join('/') + '/';
// Add `active` class to the corresponding link if any
$('#nav-item a[href="' + basePath + '"]').addClass('active');
第一行基本上采用pathName的前两个部分,因此:
如果URL是
/glossd/
,则产生/glossd/
,如果URL是
/glossd/reviews/
,则产生/glossd/reviews/
,如果URL是
/glossd/reviews/something/
,则仍会产生/glossd/reviews/
。关于javascript - 如何向href为location.pathname的导航项中添加“事件”类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55323978/