Jquery 中的 IE6 和 addClass()

Question

这在 Jquery 中似乎不起作用

$(document).ready(function() {

    $(".navlist li").each(function() {
        var href = $(this).find("a").attr("href");


        if ($(this).find("a").attr("href") == window.location.pathname) {
           $(this).attr("class", "active"); 
        }
    });

});

在我的html中

<div id="main-navigation">
                <ul class="navlist">   
                    <li><a href="<%=ResolveUrl("~/home.aspx")%>">home</a></li>                 
                    <li><a href="<%=ResolveUrl("~/sample-templates/view-list.aspx")%>">manage sample templates</a></li>
                    <li><a href="<%=ResolveUrl("~/fractional-templates/manage.aspx")%>">manage fractional templates</a></li>
                    <li><a href="<%=ResolveUrl("~/faq.aspx")%>">faq</a></li>
                </ul>
            </div>  

在我的 CSS 中

.navlist li.active a
{
    color: #fff;
    background-color: #369;
    text-decoration: none;  
}

有什么建议吗？

我调试了js，问题是没有添加类

Answer 1

这是css

应该是

.navlist .active a:link, .active a:visited, .active a:visited, .active a:hover{
    color: #fff;
    background-color: #369;
    text-decoration: none;  
}

而不是

.navlist li.active a
{
    color: #fff;
    background-color: #369;
    text-decoration: none;  
}

Answer 2

第一个选择器有效吗？你试过调试它吗？比如说，在var href=... 之前添加一些alert("i am here") 如果是，你确定比较$(this).find("a").attr("href") == window.location.pathname 是真的吗？

也许您可以尝试“更智能”的 jQuery 选择，首先匹配所有具有所需 url 的 A 元素，然后添加类名：

$(".navlist li a[href='" + window.location.pathname +"']").parent().attr("class", "active");

编辑：命名可能有问题。由于“class”是保留字，所以必须使用“className”属性！所以，我的代码变成了：

$(".navlist li a[href='" + window.location.pathname +"']").parent().attr("className", "active");

甚至更好：

$(".navlist li a[href='" + window.location.pathname +"']").parent().addClass("active");

Answer 3

将attr('href') 与location.pathname 进行比较并不那么可靠。 attr() 读取 JavaScript 属性，而不是 HTML 属性； href 的 JavaScript 属性通常是已解析的绝对 URI。 jQuery 试图解决一些与这种差异有关的问题，但我不知道它总是成功的。

更可靠的是记住 HTMLAnchorElement 对象也可以用作 Location 对象，因此您可以直接比较它们的路径名：

if (this.hostname===location.hostname && this.pathname===location.pathname)

现在检查它是否是与当前页面路径相同的内部链接。它会忽略任何尾随 ?query 或 #hash 部分。

$(this).attr("class", "active"); 

你在标题中提到的addClass绝对是更好的表达方式。

这绝对应该在 IE6 中工作。 不会在 IE6 中起作用，这可能会让你感到困惑，虽然你可以拥有一个具有多个类的元素，但你不能在同一个元素上拥有一个具有多个类要求的 CSS 选择器，例如：

a.mylink.active { ... }

这将错误地只需要 IE6 中的 active 类。 IE6 也不支持许多其他选择器，例如 > 子选择器：

div.thing > a.action { ... }

在 IE6 中永远不会匹配。