как добавить класс 'active' к элементу навигации, чей href находится в location.pathname - PullRequest
Новая
       37

как добавить класс 'active' к элементу навигации, чей href находится в location.pathname

1 голос
/ 24 марта 2019

Я пытаюсь создать шаблон Jekyll для создания сайта в стиле блога. В настоящее время я нахожусь в процессе написания и стилизации навигации, что доставляет мне пару проблем. Используя ответ на на этот вопрос Мне удалось добавить класс active на текущей странице, но есть проблемы, которые все еще нужно устранить:

  • Во-первых, при загрузке страницы активны все «вкладки», а не только «домашняя»:

Project homepage screenshot

  • Во-вторых, соответствующая «вкладка» больше не активна, когда URL идет глубже, чем первый уровень навигации. URL скриншота ниже - [baseurl]/reviews/[name-of-post], но вкладка отзывов не активна:

enter image description here

Я не уверен, как подойти к первой проблеме, но для второй, я думаю, мне нужно будет найти location.pathname для соответствующего href, но мне нужно разобраться в этом подробнее. Будет обновляться по мере необходимости, но я играл с этим целую вечность без удачи, поэтому думал, что я опубликую в то же время.

Ниже приведены фрагменты кода для соответствующих частей:

Боковая навигация HTML (написано на жидком языке) 

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

Заранее спасибо.

Джейми

1 Ответ

1 голос
/ 24 марта 2019

Теоретически должно работать следующее: 

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

Первая строка в основном занимает первые 2 части pathName, поэтому:

  • , если URL-адрес /glossd/, он возвращает /glossd/,
  • , если URL-адрес /glossd/reviews/, он возвращает /glossd/reviews/,
  • если URL-адрес /glossd/reviews/something/, он все равно возвращает /glossd/reviews/.
...