如何将 class 'active' 添加到 href 在 location.pathname 中的导航项

Question

我正在尝试在 Jekyll 模板之上构建一个博客风格的网站。我目前正在编写和设计导航，这给我带来了一些问题。使用 this question 的答案，我已经设法在当前页面上添加了 class active，但这里有一些问题仍然需要解决：

首先，页面加载时所有 'tabs' 都处于活动状态，而不仅仅是 'home' 选项卡：

其次，当 url 比第一级导航更深时，相关的 'tab' 不再有效。以下截图的 url 是 [baseurl]/reviews/[name-of-post]，但评论 'tab' 不活跃：

我不确定如何解决第一个问题，但对于第二个问题，我想我需要在 location.pathname 中搜索相关的 href，但我需要进一步研究这个问题。将根据需要进行更新，但我已经玩这个很久了，但运气不好，所以我想我会 post 同时。

以下是相关部分的代码片段：

侧边导航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 frontmatter）

---
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, where the project is also hosted on GitHub Pages.

上找到

提前致谢。

杰米

Answer 1

理论上以下应该有效：

// 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');

第一行基本上取路径名的前两部分，所以：

如果 URL 是 /glossd/，它会产生 /glossd/、
如果 URL 是 /glossd/reviews/，它会产生 /glossd/reviews/、
如果 URL 是 /glossd/reviews/something/，它仍然会产生 /glossd/reviews/。

如何将 class 'active' 添加到 href 在 location.pathname 中的导航项

how to add class 'active' to nav item whose href is in the location.pathname

javascript

jquery

liquid

jekyll