IE6 and addClass() in Jquery

Question

This doesn't seem to work in 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"); 
        }
    });

});

in my 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>  

in my css

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

Any suggestions?

I debugged the js and the problem is that the class is not being added

Answer 1

It was css

it should be

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

instead of

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

Answer 2

Does the first selector work? Have you tried debugging it? Say, add some alert("i am here") before var href=... If yes, are you sure that the comparison $(this).find("a").attr("href") == window.location.pathname is ever true?

Maybe you can try a "smarter" jQuery select, where you first match all A elements that have the required url and then just add the classname:

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

EDIT: There may be a problem with naming. Since "class" is a reserved word, you have to use "className" attribute! so, my code becomes:

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

or even better:

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

Answer 3

Comparing attr('href') against location.pathname isn't so reliable. attr() reads JavaScript properties, not HTML attributes; the JavaScript property for href is normally a resolved absolute URI. jQuery tries to work around some of the problems with that difference, but I don't know that it's always successful.

What would be more reliable would be remember that an HTMLAnchorElement object also works as a Location object, so you can compare them pathnames directly:

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

This now checks that it's an internal link with the same path as the current page. It ignores any trailing ?query or #hash parts.

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

The addClass you mention in the title is definitely a better way of saying that.

This definitely should work in IE6. What won't work in IE6, which might be tripping you up, is that though you can have an element with multiple classes, you can't have a CSS selector with multiple class requirements on the same element, eg.:

a.mylink.active { ... }

this will incorrectly require only the active class in IE6. Many other selectors aren't supported in IE6 either, for example the > child selector:

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

will never match in IE6.