[AJAX] rendre le lien du menu actif

bonjour à tous

je débute et j ai un petit code pour piger un peu le principe d ajax

mon prôblême est à cheval sur le css er ajax

j aimerai que lors du chargement de telle ou telle page, le bouton du menu reste actif. ex je suis sur la page2.html et mon bouton page2 reste rouge.

voici mon code avec css

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="FR-fr" dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ptite navigation ajax</title>
<style type="text/css">
#navigation{width:20%;float:left;overflow:hidden;}
#navigation ul{
	list-style:none outside none;
	display: inline;
}
#navigation li{
	cursor:pointer;
	display: inline;
	background-color: #CCC;
	float: left;
	margin-right: 3px;
}
#navigation li a{
	text-decoration:none;
	width:100%;
	color:#66A;
	font-size:16px;
	fopnt-family:'Helvetica';
	background-color: #F00;
}
#navigation li.active, #navigation li:hover, #navigation li:focus{
	background-color: #F00;
}
#page{
	margin-left:1;
	width:79%;
	margin-top: 100px;
}
</style>
<script langage="javascript">
		var xhr_object = null; // declaration de la variable
                var longueur_init=0;
		if(window.XMLHttpRequest){ // Firefox 
			  xhr_object = new XMLHttpRequest();} // declaration de lobjet
		else if(window.ActiveXObject){ 
					//IE 6.0 et les plus anciens
				var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
										"MSXML2.XMLHTTP.5.0",
										"MSXML2.XMLHTTP.4.0",
										"MSXML2.XMLHTTP.3.0",
										"MSXML2.XMLHTTP",
										"Microsoft.XMLHTTP");
					for(var i=0; i<XmlHttpVersions.length && !xhr_object; i++){
						try{
							//cree l'objet XmlHttpRequest
							xhr_object = new ActiveXObject(XmlHttpVersions[i])
							}
						catch(error){}
					}
 
		}else { // XMLHttpRequest non supporté par le navigateur 
			var xhr_object = null;
		}	
var Cache = new Array();
function changePage(hash){
		var page = hash.replace("#","")+".html";
		if(typeof(Cache[page]) == "undefined"){
		xhr_object.open("GET", page, true);
		xhr_object.onreadystatechange = function(){
			if(xhr_object.readyState == 4 && (xhr_object.status == 200 || xhr_object.status == 0)){
			document.getElementById('page').innerHTML = xhr_object.responseText;
			Cache[page] = xhr_object.responseText;
			document.location.hash=hash;
			_Hashencours = hash;
			}
		}
		xhr_object.send(null);
		}else{
		document.getElementById('page').innerHTML = Cache[page];document.location.hash=hash;_Hashencours = hash;}
 
}
 
var _Hashencours=document.location.hash;
window.onload=function(){if(_Hashencours != ""){changePage(_Hashencours);}else{changePage('accueil');}}
 
window.setInterval(function(){
			if(_Hashencours != document.location.hash){
					changePage(document.location.hash);
			}
	},100);
 
</script>
</head>
<body>
<div id="navigation">
<ul>
	<li onclick="changePage('#page1')">page1</li>
	<li onclick="changePage('#page2')">page2</li>
	<li onclick="changePage('#page3')">page3</li>
</ul>
</div>
 
<div id="page">
 
</div>
</body>
</html>

et 4 petits fichiers html avec un petit texte juste pour la demo (ex page2.html : "ceci est la page2"

accueil.html
page1.html
page2.html
page3.html

voila si vous avez une idée ce serait sympa

merci

stephi