IE6 и addClass () в Jquery

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

Первый селектор работает? Вы пытались его отладить? Скажем, добавьте немного alert("i am here") перед var href=... Если да, уверены ли вы, что сравнение $(this).find("a").attr("href") == window.location.pathname когда-либо верно?

Может быть, вы можете попробовать "умнее" выбрать JQuery, где вы сначала сопоставляете все A элементов, которые имеют требуемый URL, а затем просто добавьте имя класса:

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

РЕДАКТИРОВАТЬ: Может быть проблема с именованием. Так как «класс» является зарезервированным словом, вы должны использовать атрибут «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; свойство JavaScript для href обычно является разрешенным абсолютным URI. jQuery пытается обойти некоторые проблемы с этим отличием, но я не знаю, что это всегда успешно.

Что было бы более надежным, так это помните, что объект HTMLAnchorElement также работает как объект Location, поэтому вы можете напрямую сравнивать их пути:

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

Теперь это проверяет, что это внутренняя ссылка с тем же путем, что и текущая страница. Он игнорирует любые конечные ?query или #hash части.

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

addClass, который вы упоминаете в названии, безусловно, лучший способ сказать это.

Это определенно должно работать в IE6. То, что не будет работать в IE6, что может сбить вас с толку, это то, что хотя у вас может быть элемент с несколькими классами, у вас не может быть селектора CSS с несколькими требованиями к классу на одном элементе eg.:

a.mylink.active { ... }

это некорректно потребует только класс active в IE6. Многие другие селекторы также не поддерживаются в IE6, например, дочерний селектор >:

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

никогда не совпадет в IE6.