Question

我有一个主导航，但如果它与我指定的URL匹配，我需要将'current'类应用于<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放到某个目录的东西。

所以我在哪里。

'如果（url.indexOf ...'

我希望有以下几点：

'如果（URL = HTTP：//www.siteaddress/directory / ...'

那么如果当前的URL是'... / directoryname /'，那么我指定的<li>应该被选中（'current'），具体取决于该URL。

感谢阅读。

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

根据当前URL |应用类jQuery的

2 个答案: