Navigation en Ajax + Navigation Avec ancre
Bonjour,
J'ai actuellement un site ou je voudrais que la moitié de la navigation ce fasse en AJAX et l'autre moitié en navigation par ancre (de haut en bas).
Le problème est que je n'arrive pas à trouver de solution pour faire cela.
Actuellement tout fonctionne en ajax mais le problème est que mes ancres (par exemple qui sommes nous, ...) ce trouve sur la page accueil.html et donc disparaît quand je charge une autre page (par exemple contact.html).
Actuellement, même en splittant le href, cela va quand même faire une demande en ajax. Et si je clique sur par exemple qui_sommes_nous, cela vas produire une erreur me disant qu'il ne connait pas cette ancre (logique vu que accueil.html n'est plus chargée).
Voila mon code : (donc dans mon footer par exemple tous les liens avec la class "nav" sont sencé ce charger AJAX et le reste sont des redirections vers des ancres)
Index.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nice Road</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/jquery-1.11.0.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
<script type="text/javascript" src="js/navigation.js"></script><!-- Gestion des pages en Ajax-->
<script type="text/javascript" src="js/jquery.scrollTo.js"></script><!-- permet le scrollTo-->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header>
<!-- MENU -->
<nav>
<ul>
<li><a href="#qui_sommes_nous" class="menu" var="1">NOS SERVICES</a></li>
<li><a href="#download" class="menu" var="2">TELECHARGER</a></li>
<li><a href="#" class="menu" var="3" >DEVENIR CHAUFFEUR</a></li>
</ul>
</nav>
<!-- END MENU -->
<div id="connexion">
<a href="connexion.html" >INSCRIPTION / CONNEXION</a>
</div>
</header>
<!-- END HEADER -->
<section id="ajax">
<?php
$d="vues/";
$extension =".html";
if(isset($_GET['p'])){
$p(strtolower($_GET['p']));
if(preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d.$p.$extension)){
include $d.$p.$extension;
}
else{
include $d."404.html";
}
}
else{
include $d."accueil.html";
}
?>
</section>
<footer>
<nav>
<ul>
<li><a href="#qui_sommes_nous">Nos services</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#download">Téléchargez l'application Nice Road</a></li>
<li><a href="#" class="nav">Condition générales d'utilisation</a></li>
<li><a href="#" class="nav">Mentions légales</a></li>
<li><a href="#">Espace partenaires</a></li>
</ul>
</nav>
</footer> |
Ainsi que mon fichier navigation :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $(document).ready(function(){
$("#connexion a, footer nav ul li .nav").click(function(){
page= $(this).attr("href");
$.ajax({
url: "vues/"+page,
cache: false,
success: function(html){
showContent(html);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("textStatus");
}
})
return false;
});
});
/*Fonction qui affiche la page chargée*/
function showContent(data){
$("#ajax").fadeOut(500, function(){
$("#ajax").empty();
$("#ajax").append(data);
$("#ajax").fadeIn(1000);
});
} |
J'espère m'être fais comprendre :-)
Merci d'avance pour votre aide.
