window.location.hash ne fonctionne pas?

Question

J'ai un lien (index.html#services) et un <div id="services> que j'essaie de changer la couleur d'arrière-plan de quand le lien est cliqué, puis s'estompez. J'utilise la dernière jQuery et jQuery Color plug-in, et:

$(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); 
    } 
}); 

à faire la mise en avant, mais il ne fonctionne pas. Quelqu'un sait pourquoi?

Answer 1

Ce code n'est exécuté que lorsque la page est chargée et non lorsqu'un lien avec un hachage est cliqué. Essayez de suivre le lien (index.html#services) directement à partir d'un nouvel onglet du navigateur et cela fonctionnera probablement. Ce que vous devez faire est d'exécuter ce code lorsque le hachage est modifié. Les nouveaux navigateurs ont un événement onhashchange - mais pas sur les anciens navigateurs. Pour les anciens navigateurs, vous pouvez interroger la propriété de hachage de temps en temps pour voir si elle a changé.

Si par hasard vous avez un identifiant spécifique (classe CSS, ID, nom, etc.) sur les liens qui déclenchent cette animation, vous pouvez ajouter un écouteur click pour exécuter ce code. Par exemple:

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(); 
}); 

Answer 2

Ou utiliser

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); 
    } 
}; 

selon les navigateurs que vous visez.