Question

当页面的url为= link的href属性

时，这个简单的脚本会为列表中的链接添加一个“活动”类

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a').each(function(){
 var Link  = $(this).attr('href');
      if (Link == HeRe){ $(this).addClass('active');}
 });

它有效。但是......仅当 href 属性只是一个文件 href="index.html"时。在接下来的案例或类似情况下根本不起作用：

<a href="foo/index.html">foo</a>
<a href="../bar/index.html">bar</a>

实际上要解决它我可以写：

 var TheP = window.location.pathname.split('/');
 var P1   = TheP[TheP.length-1];
 var P2   = TheP[TheP.length-2];
 var HeRe = P2+"/"+P1;

 $('ul a').each(function(){
  var Ln = $(this).attr('href');
  var Ln = Ln.split('/');
  var L1 = Ln[Ln.length-1];
  var L2 = Ln[Ln.length-2];
  var Link = L2+"/"+L1;
      if (Link == HeRe){$(this).addClass('active');}
 });

但是......嗯......我认为应该有一种更好，更灵活的方式。另外，因为上面的内容只有一个文件作为路径不起作用：（

Answer 1

更新：我最初误解了这个问题。重新阅读它，听起来你想确定不匹配所有index.html，但只有你所在的特定的（实际上更有意义）。

在这种情况下，你可以这样做：

var path = window.location.href; // Just grabbing a handy reference to it
$('ul a').each(function() {
    if (this.href === path) {
        $(this).addClass('active');
    }
});

...因为DOM元素is the absolute path的href属性（不与“href”属性相同）。

<强> Live example

显然，你可以做的就是限制那个初始选择器（在合理范围内）越多越好。例如，如果这一切都在某个导航结构中，那么仅在该结构中工作将更有效。

此外，如果有匹配的 lot ，如果您愿意，可以在添加类时避免使用jQuery包装器：

    if (this.href === path) {
        this.className += " active"; // note the space
    }

原始回答：

如果href属性在文件名部分之前始终有/，那么：

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"]').addClass('active');

使用attribute ends-with selector查找相关链接。

如果href属性有时可能只是index.html或类似，则可以执行以下操作：

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"], ul a[href="' + HeRe + '"]').addClass('active');

...使用“ends-with”选择器捕捉前面/的那些，以及使用“equals”选择器完全匹配的那些。

Answer 2

而不是分解路径名，为什么不只是比较整个事情。如果你有相对网址，那应该很容易。此外，您可以执行替换以处理绝对URL。

var mainpart = window.location.protocol + "//" + window.location.host;
var path = '/' + window.location.pathname;
$('ul a').each(function(){
    var Link  = $(this).attr('href').replace(mainpart, '');
    if (Link === path || '/' + Link === path){ $(this).addClass('active');}
});

Answer 3

var TheP = window.location.pathname.split('/');
var HeRe = TheP[TheP.length-1];
$('ul a[href$="' + HeRe + '"]').addClass('active');

根据规范http://www.w3.org/TR/css3-selectors/#attribute-substrings：

提供了三个额外的属性选择器，用于匹配属性值中的子字符串：

[att ^ = val] 表示带有的元素其值开始的att属性前缀为“val”。如果“val”是空字符串然后是选择器不代表什么。
[att $ = val] 表示带有的元素值结束的att属性后缀为“val”。如果“val”是空字符串然后是选择器不代表什么。
[att * = val] 表示带有的元素 att属性的值包含至少一个实例子串“val”。如果“val”是然后选择器执行空字符串不代表什么。

jQuery更好的想法是将活动类添加到菜单项

3 个答案: