javascript - window.location.hash 不起作用？

Question

我有一个链接 ( 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);
    }
});

进行突出显示，但它不起作用。有谁知道为什么吗？

Answer 1

该代码仅在加载页面时运行，而不是在单击带有哈希值的链接时运行。尝试直接从新的浏览器选项卡中点击链接 (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();
});