jQuery Sélection rapide de produits par le lien

Question

Cela va être difficile à expliquer mais je vais faire de mon mieux.

J'ai une page avec 3 div contenant chacune des informations et un bouton de commande pour chaque produit. Le visiteur peut cliquer sur une image de produit et il cachera essentiellement tous les divs et montrera celui lié à l'image sur laquelle ils ont cliqué.

J'ai une barre latérale qui fonctionne globalement sur toutes les pages du site qui a des "liens rapides" vers chaque produit. Je veux savoir s'il y a un moyen de les relier à la page du produit afin que les gens puissent les cliquer sur n'importe quelle page du site et il ouvrira la page du produit avec le produit sur lequel ils ont déjà cliqué et visible.

Je suppose que cela peut être fait en utilisant # product1, # product2, etc à la fin des liens vers la page du produit, mais je ne suis pas tout à fait sûr comment cela peut être réalisé. Quelqu'un a-t-il des idées? PS: Sur la page du produit, les produits sont sélectionnés simplement en détectant un clic sur les images du produit, puis en masquant et en affichant un DIV unique (et non pas en utilisant des ancres # link).

Answer 1

Vous souhaitez utiliser des ancrages.

Alors vous nommez une ancre à l'intérieur de la DIV.

<div id="product1"> 
<a name="product1"> 
</div> 

Puis vous liez à cela avec le '#' tel que vous le décrivez. Utilisez le chemin d'accès complet si vous créez un lien à partir d'une autre page, utilisez simplement # product1 si vous le faites depuis la même page.

<a href="/path/to/page/#product1"> 

Maintenant le plus délicat que vous avez découvert est jQuery se rendre compte que vous avez demandé un point d'ancrage lorsque les charges de page. Ce code dépend d'une construction comme ci-dessus où l'id de la div est le même nom que l'ancre. Un petit morceau d'exemple de code est ici pour invoquer la méthode show() sur le div avec le même nom que l'ancre qui a été passée dans l'URI.

$(document).ready(function() { 
    var uri = document.location.toString(); 
    if (uri.match("#")) { 
     anchor = uri.split("#")[1]; 
     $('#' + anchor).show(); 
    } 
});