Установите img src на основе текущего URL в Nav с помощью jQuery - аналогично hover replace

Question

Я ищу что-то похожее на это: Активная навигация с помощью jQuery - невозможно применить класс по умолчанию для привязки

Но я использую изображения внутри неупорядоченного списка и Я хочу определить текущий URL и добавить img src с _over.jpg, чтобы показать, что это текущая страница. (лекций нет) при использовании позиции BG, пожалуйста - клиенту это нравится.)

Я также использую этот простой указатель мыши (jQuery mouseover), который, я уверен, нужно будет скорректировать ...

$(document).ready(function(){

    $(".navbar li").each(function(){
        var link = $(this).children("a");
        var image = $(link).children("img");
        var imgsrc = $(image).attr("src");

        // add mouseover
        $(link).mouseover(function(){
            var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
            $(image).attr("src",on);
        });

        // add mouse out
        $(link).mouseout(function(){
            $(image).attr("src",imgsrc);
        });
    });

});

Answer 1

Магия в document.location.pathname: P

$(document).ready(function(){
    $(".navbar li").each(function(){
        var link = $(this).children("a");
        var image = $(link).children("img");
        var imgsrc = image.attr("src"); //no need to rewrap in $

        var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
            if (link.attr("href") == document.location.pathname || link.attr("href") == document.location.href)
            $(image).attr("src",on);
            else
                // add mouseover
                $(link).hover(function(){
                    $(image).attr("src",on);
                }, function(){
                    $(image).attr("src",imgsrc);
                });
    });
});

Почему два условия ORed в if? Internet Explorer вернет имя хоста (document.location.href), а Firefox / WebKit вернет именно то, что написано по вашей ссылке. Но я бы проверил наличие кросс-браузерных проблем на вашем месте.