Afficher le contenu sans recharger la page

**quaresma** · 24/10/2010, 12h48

Bonjour à toutes et tous,

Je suis en train de faire un site internet.
Comme vous allez pouvoir le constater sur l'image ci-dessous, j'ai un champ au milieu avec les liens et un autre champ à droite avec le contenu correspondant au lien.

J'aimerai savoir s'il est possible de faire en sorte que quand je clique sur un lien, le contenu du champ de droite change mais sans recharger la page ?

Voici l'image pour plus de compréhension :

Merci beaucoup pour votre aide.

**kabkab** · 24/10/2010, 12h53

Bonjour,
Deux solutions s'offrent à toi. Des frames ou mieux du ajax.
Renseignes toi sur ces deux solutions.

**quaresma** · 24/10/2010, 13h15

Je ne veux pas utiliser les iframes.

Sinon, en css et html ce n'est pas réalisable ?

**Atomya Rise** · 24/10/2010, 14h56

Peux tu nous montrer ton code ?

Est ce qu'il y a un langage côté serveur ?

Merci de nous donner les informations nécessaire pour une aide éventuelle

**quaresma** · 24/10/2010, 15h04

Oui il y a un langage côté serveur.

Voici mon code :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
	 <script type="text/javascript" src="js/copie_functions.js"></script>
<style type="text/css">
<!--
body {
        margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
<td width="183" valign="top"><?php include("menu/copie_menu.php") ?></td>
<td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
<td width="17" style="background: #000;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

CSS appelé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#menu{
	width:150px;
//margin-top: -26px;
}
.menu, .sousmenu{
	text-align: right;
}
.menu{
	height:18px;
	width:150px;
	color:#fff;
	padding-bottom: 10px;
	top:0;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
}
.sousmenu{
	height:14px;
	width:170px;
	padding: 0px;
	color:#ffffff;
	text-align: right;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	margin-top: 0;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#666666;
	font-family:Garamond;
	font-size:18px;
	text-decoration:none;
}
.sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
	color:#ffffff;
}

javascript du menu de gauche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 5; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}

PHP du menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div id="menu">
<?php
require("identification/connexion_sql.php");
// on attaque le php ici
// dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0
$req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");
$rep1 = mysql_query($req1);
while($row1 = mysql_fetch_array($rep1)) {
 
// on affiche le menu de niveau 1
echo "<div class=\"menu\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this)\"><a href=\"#\">".$row1['lib_menu']."</a></div><br>\n";
// ensuite on fait une seconde requete pour chercher les sous menus de ce niveau, s'il y en a on les affiche, sinon on ne fait rien
 
$req2="SELECT id_menu, lib_menu FROM menus WHERE id_parent='".$row1['id_menu']."' ORDER BY ordre_menu"  or die ("impossible d'effectuer la requête");
$rep2=mysql_query($req2);
$nb2=mysql_num_rows($rep2);
if (isset($nb2) && $nb2>0) {
 
echo "<div id=\"sousmenu".$row1['id_menu']."\" style=\"display:none\"><br>\n";
while ($row2=mysql_fetch_array($rep2)) {
echo "<div class=\"sousmenu\"><a href=\"#\">".htmlentities($row2['lib_menu'])."</a></div><br>\n";
}
echo "</div>\n";
}
}
?>
</div>

Résultat visible ici : http://www.la-grange-sardieres.fr/si...sentation2.php

Ce que je vois, c'est juste un proposition, mais faire deux div dans la zone où est écrit "contenu".

Dans la zone de gauche les liens et dans la zone de droite, le contenu qui change à chaque fois que je clic sur un lien.

Mais, je ne sais pas du tout comment faire cela...

Merci beaucoup pour votre aide.

**Atomya Rise** · 24/10/2010, 15h39

heuuu merci, mais pour ton contenu, quel est le code de ton contenu que tu veux rendre plus dynamique ?

(Ton lien ne mène a rien...)

Afficher le contenu sans recharger la page

HTML

Vue hybride

Discussions similaires

Partager

Partager