Comment créer ces liens d'ancrage dynamiques avec jQuery?

Question

J'ai récemment découvert un site web qui fait quelque chose de vraiment cool! Exemple:

• Il existe deux liens "Cat" et "Dog".
• Il y a deux conteneurs DIV, id = "catImage" et id = "dogImage"
• L'URL initiale ressemble http://mysite.com/#cat
• Dans un premier temps, l'image de chat est visible
• En cliquant sur le lien Dog va disparaître le catImage div et fondu dans le dogImage div
• de plus, il va changer l'ancre dans l'URL du navigateur pour: http://mysite.com/#dog
• ouverture du site avec httü: //mysite.com/#dog affiche l'image de chien d'abord

Est-ce possible en utilisant jQuery? Comment analyser cette ancre et comment appeler une fonction lorsque je clique sur le lien sans que le lien suive une URL? Je suis un mec objectif-c et je ne sais rien sur JS ... J'espère que ma question n'est pas trop bête pour vous.

Answer 1

avec ce balisage:

<div id="images"> 
    <div id="catImage">some cat image here</div> 
    <div id="dogImage" style="display:none;">some dog image here</div> 
</div> 
<div id="anchors"> 
    <a href="#cat">catImage anchor</a> 
    <a href="#dog">dogImage anchor</a> 
</div> 

et avec ce Js (en supposant jquery 1.4.x)

$(function() { 

     $("#anchors a").click(function() { 
      // send the index of the anchor to the function 
      fadeImage($(this).index()); 
     }); 

     var hash = window.location.hash; 
     if (hash) { 

      var elementId = "#" + hash.substring(1) + 'Image'; 
      var $div = $(elementId); 

      // check if this element exists, and if so, send that index to the function 
      if ($div.length) { 
       fadeImage($div.index()); 
      } 

     } 

    }); 

    function fadeImage(index) { 
     $("#images div:eq(" + index + ")").fadeIn().siblings().fadeOut(); 
    } 

Et pour expliquer ce qui se passe ici:

J'utilise la fonction index jquery() pour obtenir l'indice de l'élément relatif à ses frères et sœurs. Je passe ensuite cet index à la fonction fadeImage, qui trouve le même index div et l'intègre. En utilisant le chaînage, je regarde ensuite les frères et soeurs de ce div pour les faire disparaître. C'est utile si vous avez plus de 2 divs à fondu ici.

Pour l'utilisation de l'ancre/hachage, je trouve juste la div avec l'identifiant correspondant et obtient son index, et le passe à la même fonction.

Les docs de QQuery peuvent expliquer les différentes méthodes beaucoup mieux que je peux.

Answer 2

Mise à jour: Oh j'ai oublié, évidemment, vous devriez lire un tutorial about jQuery si vous voulez l'utiliser.

Vous pouvez obtenir et définir le hachage de l'URL via window.location.hash, par ex.

alert(window.location.hash); 
//and 
window.location.hash = 'test' 

Vous devez read about events afin de comprendre comment cela fonctionne. L'objet event fournit une méthode preventDefault(), qui fait exactement ce qu'elle indique (en empêchant le comportement par défaut).

E.g. avec jQuery:

$('a').click(function(e) { 
    //Do something.. 
    // prevent to follow the link 
    e.preventDefault(); 
}); 

Answer 3

En utilisant location.href, vous pouvez obtenir l'URL complète en javascript.

vous pouvez sous-chaîne ou chaîne remplacer votre nom de domaine et le repos sera votre paramètre chien ou chat.

Lorsque vous avez le paramètre.

jquery fonctions comme show(); cacher(); pour montrer le chat et cacher le chien.

En ajoutant ou en supprimant le style vous pouvez également changer les images

.add() est là

addClass removeClass est là

http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z

http://rockmanx.wordpress.com/2008/10/03/get-url-parameters-using-javascript/

http://api.jquery.com/show/

http://api.jquery.com/addClass/