如何將類“active”添加到其 href 在 location.pathname 中的導航項

Question

我正在嘗試在 Jekyll 模板之上構建一個博客風格的網站。 我目前正在編寫和設計導航的樣式，這給我帶來了一些問題。 使用這個問題的答案，我設法在當前頁面上添加了active類，但這里有一些仍然需要解決的問題：

• 首先，頁面加載時所有“標簽”都處於活動狀態，而不僅僅是“主頁”標簽：

• 其次，當 url 比第一級導航更深時，相關的“選項卡”不再處於活動狀態。 以下屏幕截圖的網址為[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 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上找到，該項目也托管在 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');

第一行基本上采用 pathName 的前兩部分，因此：

• 如果 URL 是/glossd/ ，它會產生/glossd/ ，
• 如果 URL 是/glossd/reviews/ ，它會產生/glossd/reviews/ ，
• 如果 URL 是/glossd/reviews/something/ ，它仍然會產生/glossd/reviews/ 。