11489 sujets

JavaScript, DOM et API Web HTML5

Gestion de l'historique

Bonjour ,
Je développe mon premier site web. J'ai du mal avec la navigation.
Pour l'instant, j'arrive à rafraichir la div contenu en fonction du menu et le hash change bien.
Mon problème,
C'est que quand je click sur précèdent le hash change mais pas le contenu.
De même quand je fais F5 je retombe sur la page accueil.
Comment resoudre ce problème?
Voici mon code 

$(document).ready(function(){
    $("#head_nav a").click(function(){
                loadPage($(this).attr('href'));
        return false;
    });
         

        loadPage("accueil.html");
});
 
function afficher(data){
  $(".loader").remove(); // On supprime le loader
  $("#art").fadeOut(500,function(){
    $("#art").empty();
    $("#art").append(data);
    $("#art").fadeIn(1000);
  });
}
 
function changeHash(hash){
  parent.location.hash = hash;
}
 
function getHash(){
  return parent.location.hash;
}
 
function loadPage( page ){
      
 
        $.ajax({
            url: "contenu/"+page,
            cache:false,
            success:function(html){
 
                afficher(html);
                                // mise à jour du hash
                                changeHash(page);
            },
            error:function(XMLHttpRequest,textStatus, errorThrown){
                afficher("erreur lors du chagement de la page");
            }
        })
} 
</script>


et mon code html

<body >
 
	<header id="site_head">
	
	<div class="header_cont">
	<img src="Images/signature_1.gif" alt="logo"/>
        <div id="head_nav">  
 		
		   <ul>
		  
              <li><a href="accueil.html" title="accueil" ><img src="Images/home.png"/></a></li>
              <li><a href="tatouage_henne.php" title="henne" >Tatouage henné</a></li>
              <li><a href="tatouage_henne_paillette.php"  title="henne_paillette" >Henné Paillètte</a></li>			  	  
              <li><a href="tatouage_bijou.php"  title="bijou" >Bijou</a></li>  
              <li><a href="jagua.php"  title="jagua"  >Jagua</a></li>			  
              <li><a href="tatouage_henne.php"  title="objets"  >Objets</a></li> 			  
              <li><a href="tarif.php"  title="tarif"  >Tarif</a></li>
                <li><a href="contact.php" title="contact"  >Contact</a></li>      
          </ul>
		</div>

	</div>
	</header>
	 
<div id="main_content">

		<section id="sc">
		<header class="section_tit" id="titreheader">
		<h3>
			<div id="Titre"></div>
			
       </h3>
		</header>          
			<div class="texte_accueil" id="texte_page">				
				<div  id="art" class="art">					
              
                 </div>

		    <aside>
					<div class="promotions">
                        <header class="post_head">
                         <div id="fond"> 
                            <div class="ruban">     
                             <h2>Informations</h2>     
                            </div>     
                          <div class="ruban_gauche"></div>
                          <div class="ruban_droit"></div>
                         </div>
                        </header>
					
					
					<p class="texte_clignotant">Profitez de-20% sur le tatouage bijou de peau pour vos fêtes de fin d'année. </p>
					<br>
					<br>
					<p>
					<a  target="_blank" href="https://fr-fr.facebook.com/TattooLina">
                         <img title="tatouage/Facebook" alt="tatouage/Facebook" src="Images/facebook2.png"/> Suivez nous sur facebook
					</a></p>
				    </div>
					
                    					
				</aside>		

			</div>

	</section> 
	<div id=footer>
Plan | Mentions legales | Contact |
</div> 
</div>     

</body>


Merci d'avance
Sujet clos
Aller à