window.location.hash无法正常工作?

时间:2010-10-03 05:28:12

标签: javascript jquery html xhtml

我有一个链接(index.html#services)和一个<div id="services>,我正在尝试更改链接点击后的背景颜色然后淡出。我正在使用最新的jQuery和jQuery Color插件,并且:

$(document).ready(function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000);
    }
});

进行突出显示,但它不起作用。谁知道为什么?

2 个答案:

答案 0 :(得分:3)

该代码仅在加载页面时运行,而不是在单击带有哈希的链接时运行。尝试直接从新的浏览器选项卡中链接(index.html#services),它可能会起作用。您需要做的是在更改哈希时运行该代码。新浏览器有一个onhashchange事件 - 但在旧浏览器上没有这样的事情。对于旧浏览器,您可以经常轮询哈希属性以查看它是否已更改。

如果在触发该动画的链接上有一个特定的标识符(css类,id,名称等),您可以添加click侦听器来运行该代码。例如:

function animateBackground() {
    var service = $('#services');
    var originalColor = service.css('background-color');

    service.css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 3000);
}

$(function () { // shortcut to $(document.ready)
   $('.fade-bg').live('click', animateBackground);
   animateBackground();
});

答案 1 :(得分:0)

或使用

window.onhashchange = function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000);
    }
};

取决于您定位的浏览器。