在 JQuery 中将 CSS 类设置为 href="/"答案

【问题标题】：Setting CSS class to href="/" in JQuery在 JQuery 中将 CSS 类设置为 href="/"
【发布时间】：2013-02-04 06:05:50
【问题描述】：

我正在尝试在我的侧边栏中的链接中设置 CSS 类“已选择”。当我在“家”时，例如root url / 我在设置此类时遇到问题。由于所有 URL 都以 / 结尾。

这里有一些相关代码：

$(document).ready(function(){
    var path = location.pathname.substring();
    $('nav#sitenavigation a[href$="' + path + '"]').attr('class', 'selected');
});

如何将“selected”设置为仅包含： href="/" 而不是 href="/events/" 的 a-tag ？

【问题讨论】：

似乎您正在检查它是否以 / 结尾 - 如果您检查它是否以 / 开头怎么办？或者如果 href="/" 完全正确呢？
该标签的 href 中有什么内容？主页上的网址是什么？如果有人输入了一个稍微不同的 url（比如有/没有尾随 / ），location.pathname 中会显示什么？

标签： javascript jquery css jquery-selectors

【解决方案1】：

只使用= (attribute equals) 而不是$= (attribute ends-with)，像这样：

$(document).ready(function(){
  var path = location.pathname.substring();
  $('nav#sitenavigation a[href="' + path + '"]').attr('class', 'selected');
});

【讨论】：

【解决方案2】：

$('nav#sitenavigation a[href=/]').attr('class', 'selected');

应该这样做 - 您只选择带有“/”href 的链接。唯一的区别是 = 与 $=。要完全匹配您的代码...

$('nav#sitenavigation a[href="' + path + '"]').attr('class', 'selected');

jQuery 选择器页面解释了所有不同的比较运算符是如何工作的： http://api.jquery.com/category/selectors/

最后说明 - 此代码将删除链接上的任何其他类并将其替换为选定的。要保留任何现有的类，请像这样使用 addClass()：

$('nav#sitenavigation a[href="' + path + '"]').addClass('selected');

【讨论】：