navigation entre div jquery
Bonjour je recherche la solutions pour naviguer entre ma div contenu pour le moment j'utilise une fonction ajax qui fonction pas top auriez vous une petite idée svp?
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//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
/* root element for tabs */
ul.css-tabs {
margin:0 !important;
padding:0;
height:30px;
}
/* single tab */
ul.css-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.css-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #0099CC;
border-bottom:0px;
height:18px;
background-color:#0099CC;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}
ul.css-tabs a:hover {
background-color:#ABEF8D;
color:#333;
}
/* selected tab */
ul.css-tabs a.current {
background-color:#0099CC;
border-bottom:1px solid #0099CC;
color:#000;
cursor:default;
}
/* tab pane */
.css-panes div {
display:none;
border:2px solid #0099CC;
border-radius: 10px;
min-height:150px;
padding:15px 20px;
background-color:#ffffff;
}
</style>
<script>
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>
</head>
<body>
<!-- tabs -->
<ul class="css-tabs">
<li><a href="#" onclick="envoieRequete('page1.html','contenu');"><span style="color:white;"><b>Tab 1</b></span></a></li>
<li><a href="ajax1.html"><span style="color:blue;"><b>Tab 1</b></span></a></li>
<li><a href="ajax2.html"><span style="color:blue;"><b>Tab 1</b></span></a></li>
</ul>
<!-- single pane -->
<div class="css-panes">
<div id="contenu" style="display:block">
</div>
</div>
</body>
</html> |
