JQUERY divs page intérieure, avec URL?

Question

J'ai une question un peu compliquée. Compliqué pour moi. Tout d'abord, je tiens à dire que j'ai lu presque tout ici dans le forum à ce sujet, j'ai essayé quelques codes affectueux ici et sur le web mais rien ne convient dans mon cas. Donc: J'ai un site basé sur une seule page (index.php). Tout le contenu est appelé via show/hide divs avec jquery. Après avoir fait la première page de ce site (ce que je veux vraiment dire est "Après avoir terminé le premier div avec du contenu sur la page"), j'ai commencé à faire le second. Et voici le problème. Quand je fais un changement dans le second div et que je rafraîchis le site, le navigateur retourne la vue avec ma première div (la complétée). Parce que je lui ai dit, que c'est le div ouvert par défaut. Et maintenant je veux faire que tout le monde div aura sa propre URL (exemple: http://mysite/#divone, http://mysite/#divtwo, etc.) visible dans la barre d'adresse du navigateur, et de cette façon je peux partager des liens, et mettre en signet le contenu exact etc. J'ai lu des plugins d'histoire jquery et d'autres solutions comme ça (widows.location, bookmark plugin, etc.) mais rien ne semble fonctionner pour moi ...

Donc c'est le code dans mon fichier index.php, qui appelle le divs:

<!-- START MENU --> 
<ul class="lavaLampWithImage" id="lava"> 

<li class="current"><a href="#about-us" onclick="togLayer('home');">About Us</a></li> 

<li><a href="#web-design" onclick="togLayer('web');">Web Design</a></li> 

<li><a href="#graphic-design" onclick="togLayer('graphic');">Graphic Design</a></li> 

<li><a href="#gallery" onclick="togLayer('gallery');">Gallery</a></li> 
</ul> 
<!-- END MENU --> 

Comme vous pouvez le voir, il appelle ID div avec fonction onclick, qui est l'un des problèmes. La seconde est que l'autre script que j'utilise pour visualiser les liens de manière assez simple (Lava Lamp fo Jquery) contient des fonctions pour changer la classe du lien cliqué ("current"). La plupart des solutions que j'ai trouvées dans le web contiennent des fonctions propres pour cela, et les choses vont gâcher.

C'est l'un des divs qui contient le contenu d'autre page php:

<!-- START HOME PAGE --> 
    <div id="home"> 
    <?php include("includes/home.php"); ?> 
    </div> 
<!-- END HOME PAGE --> 

Et c'est le script que j'utilise pour appeler divs onclick:

Je serai reconnaissant pour toute aide ou conseil à ce sujet. J'espère que mon explication est compréhensible et correcte

Edit: Voici le site que je suis talkin' about: http://spoonk.eu Il ne dispose toujours pas de version anglaise. Mais je pense que vous comprendrez de quoi je parle.

Answer 1

Basé sur les deux postes que j'ai énumérés dans ma première réponse, j'ai compilé la solution suivante (testé dans FF et IE7).

HTML:

<a href="#div1" onclick="showDiv('#div1');">Div1</a>&nbsp; 
<a href="#div2" onclick="showDiv('#div2');">Div2</a>&nbsp; 
<a href="#div3" onclick="showDiv('#div3');">Div3</a>&nbsp; 
<br /><br /> 
<div id="div1" class="allDivs"><h1>Div 1 Content</h1></div> 
<div id="div2" class="allDivs"><h1>Div 2 Content</h1></div> 
<div id="div3" class="allDivs"><h1>Div 3 Content</h1></div> 

Javascript:

$(document).ready(function() { 
    var anchor = '#div1'; 

    if (location.hash != '') 
     anchor = location.hash; 

    showDiv(anchor); 
}); 

function showDiv(divID) { 
    $('.allDivs').hide(); 
    $(divID).show(); 
} 

Answer 2

Jetez un oeil à this post, ou this jQuery plugin.

Answer 3

Il semble que ce que vous essayez de faire est d'avoir la page charger le div précédemment sélectionné lorsque l'utilisateur actualise la page. Voici ce que vous devez faire. Pour chaque lien/balise d'ancrage (<a>), assurez-vous que son attribut href est défini sur "#the_name_of_the_panel. Dans votre événement click pour chaque lien, je suppose que vous avez déjà pensé à faire return false; à la fin de l'événement pour éviter que la page ne défile au hasard vers un autre emplacement - mais si vous ne l'avez pas fait, assurez-vous que vous faites-le aussi.

Lorsque l'utilisateur actualise la page, ce code doit gérer obtenir le div approprié:

$(document).ready(function() { 
    theLoc = location.href; 
    hash = theLoc.split("#"); 
    if(hash.length > 1) { 
     hash = hash[1]; // this gets the part after the # 
    } else { 
     /* this is necessary because the user might not be 
      refreshing, they might be making a first visit to the page */ 
     hash = 'name of default div'; 
    } 

    // your code to switch to the appropriate div goes here 
}); 

Cela devrait faire l'affaire. ;)