根据当前 URL 应用一个类 | jQuery

Question

我有一个主导航，但如果它与我指定的 URL 匹配，我需要将“当前”类应用到 <li>。

这就是我所拥有的：

$(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 放到某个目录的东西。

所以我有。

'if(url.indexOf...'

我想要一些类似的东西：

'if(url=http://www.siteaddress/directory/...'

那么如果当前 URL 是 '.../directoryname/'，那么我指定的 <li> 应该根据那个 URL 被选中（'current'）。

感谢阅读。

Answer 1

我可能会将潜在的目录匹配项放在一个数组中，然后在数组中查找目录的索引，并使用该索引号来指定要使用的 ID。

因为索引将基于 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 存储the $.inArray method 的结果，它遍历arr 数组寻找与dir 的匹配，并返回索引号。 （再次添加 1 以匹配您的索引。）
• 然后将index 连接到选择器中，以选择正确的选择器。

---

编辑：将其更改为不使用正则表达式进行拆分。应该没有必要。

Answer 2

为什么还要使用数组？

使用 patrick dw 代码中的相同 dir var...

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