jQuery 是向菜单项添加活动类的更好主意

Question

当页面的 url = 链接的 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 元素 href 属性（与“href”属性不同） ="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-88517319" rel="nofollow">是绝对路径。

实例

显然，您可以做更多的事情来限制初始选择器（在原因），越好。例如，如果这一切都在某个导航结构内，则只有在该结构内工作才会更有效。

另外，如果有很多匹配项，您可以在添加类时避免执行 jQuery 包装器（如果您愿意）：

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

---

原始答案：

如果 href< /code> 属性在文件名部分之前总是有一个 /，然后：

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

使用 属性结尾为选择器来查找相关链接。

如果 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

与其分解路径名，不如直接比较整个路径。如果你有相对网址，那应该很容易。此外，您还可以执行替换来处理绝对网址。

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”是
  空字符串，然后选择器执行
  不代表什么。