Блог

Я не слишком разбираюсь в JS, поэтому любое решение для этого было бы здорово!

В настоящее время я добавляю «активный» класс к элементам навигации на основе «текущей» страницы, как показано ниже:

 $(function(){
    var current = location.pathname;
    $('#topiclinks a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if ($this.attr('href') === current) {
            $this.addClass('active');
        }
    })
})
 

Это работает для элементов навигации, начиная с URL, но у них также есть дополнительные страницы путей после использования разбивки на страницы ( /page/1 /page/2 и т.д.). Мало того, что первый элемент имеет структуру, отличную от остальных элементов.

У меня есть эти элементы навигации:

«Все»

Базовый URL = /insight

Дополнительные страницы путей:

 /insight/page/1

/insight/page/2
 

Затем все остальные элементы в навигаторе следуют по другому пути:

«Технология»

Базовый URL = /insight/tag/technology

Дополнительные пути к страницам:

 /insight/tag/technology/page/1

/insight/tag/technology/page/2

/insight/tag/technology/page/3
 

«Поддержка»

Базовый URL = /insight/tag/support

Дополнительные пути к страницам:

 /insight/tag/support/page/1

/insight/tag/support/page/2

/insight/tag/support/page/3
 

Элементы навигации выглядят следующим образом:

 <a class="topic-link" href="/insight">All</a>
<a class="topic-link" href="/insight/tag/technology">Technology</a>
<a class="topic-link" href="/insight/tag/support">support</a>
 

Первый элемент навигации (все) имеет другой конечный путь, чем остальные (при переходе по страницам), а следующие включают часть этого пути, но некоторые дополнительные пути (страницы) после.

Есть идеи, как я могу заставить «активный» класс оставаться в элементе навигации, когда путь URL является текущим, но также и определенным путем после него? И для 2 разных структур путей точно так, как описано выше?

Спасибо за любую помощь!

Это будет работать

Я преобразовал свой более простой скрипт в jQuery, чтобы оставаться в соответствии с вашим кодом

 const getPath = url => {
  const path = new URL(url).pathname
  const parts = path.split("/");
  return parts.length < 3 || !parts.includes("tag") ? parts[1] : parts[3]
};

const path = getPath("https://yourserver.com/insight"); // getPath(location.href)

$("#nav a").each(function() {
  const lnkPath = getPath($(this).prop("href"));
  $(this).toggleClass("active", path === lnkPath)
}) 

 .active {
  color: red
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <a class="topic-link" href="/insight/page/1">All</a>
  <a class="topic-link" href="/insight/tag/technology">Technology</a>
  <a class="topic-link" href="/insight/tag/support">Support</a>
</div> 

Изменить

 const path = getPath("https://yourserver.com/insight/tag/support"); // getPath(location.href)
 

Для

 const path = getPath(location.href)
 

когда счастлив

если вам нужно создать все ссылки с определенным href, чтобы иметь «активный» класс, тогда просто используйте

 $('a[href*="some_url"]').each(function() {
     $(this).addClass('active')
});