Применить класс в зависимости от текущего URL |Jquery

Question

У меня есть основная навигация, но мне нужно применить класс 'current' к <li>, если он соответствует указанному мной URL-адресу.

Вот что у меня есть:

$(function() {

  var url = location.pathname;

  if(url.indexOf('girls')) {
    $("li#nav-01").addClass('current');
  }

  if(url.indexOf('boys')) {
    $("li#nav-02").addClass('current');
  }

  if(url.indexOf('capes')) {
    $("li#nav-03").addClass('current');
  }

  if(url.indexOf('about_us')) {
    $("li#nav-04").addClass('current');
  }

  if(url.indexOf('contact')) {
    $("li#nav-05").addClass('current');
  }

  if(url.indexOf('frequently_asked_questions')) {
    $("li#nav-06").addClass('current');
  }
});

, а затем

<div id="nav-main"> 
<ul class="navmain"> 
<li id="nav-01" class=""><a href="../girls/">Girls</a></li> 
<li id="nav-02" class=""><a href="../boys/">Boys</a></li> 
<li id="nav-03" class=""><a href="../capes/">Accessories</a></li>
...
</ul> 
</div>

Это, похоже, не работает, поэтому я ищу то, что позволяет мне поместить полный URL до определенного каталога.

Так, где у меня есть.

'если (url.indexOf ...

Я хотел бы иметь что-то вроде:

'если (URL = http://www.siteaddress/directory/...'

Итак, если текущий URL-адрес «... / directoryname /», то <li>, который я указал, должен быть выбран («текущий») в зависимости от этого URL-адреса.

Спасибо за чтение.

Answer 1

Зачем вообще использовать массив?

с использованием того же самого каталога dir из кода Патрика Ду ...

  var dir = location.pathname.split('/')[1];
  $('ul.navmain').find('a[href*="' + dir + '"]').parent().addClass('current');

Answer 2

Я бы, вероятно, поместил потенциальные совпадения каталогов в массив, затем искал бы индекс каталога в массиве и использовал бы этот индекс, чтобы указать, какой идентификатор вы хотите использовать.

Поскольку индекс будет основан на 0, я добавил 1 к индексу, чтобы получить индекс на 1, как ваши навигационные данные.

$(function() {

  var arr = ['girls','boys','capes','about_us','contact','frequently_asked_questions'];
  var dir = location.pathname.split('/')[1];
  var index = $.inArray( dir, arr ) + 1;
  $("#nav-0" + index).addClass('current');

});

• arr хранит имена каталогов
• dir - это путь, разделенный на символ /. Элемент с индексом [1] должен быть первым каталогом.
• index сохраняет результат метода $.inArray , который перебирает массив arr в поисках совпадения до dir и возвращает индексный номер. (Снова 1 добавляется для соответствия вашей индексации.)
• Затем index объединяется в селектор, чтобы выбрать правильный.

---

РЕДАКТИРОВАТЬ: Изменено на не использовать регулярное выражение для разделения. Не должно быть необходимости.