Lien de div en div...
Résolu
Bonjour,
j ai une page html divisé avec du css: div#entete, div#navigation, div#principal, div#secondaire, div#pied de page...
dans l'entete j ai des onglets genre: home
j aimerai que quand on clique sur "home" la page "salons.html" apparaisse dans la div #navigation
est ce possible? j ai regardé sur les forums et il y aurait une solution en java mais la je n y comprend rien!
merci pour votre aide
j ai une page html divisé avec du css: div#entete, div#navigation, div#principal, div#secondaire, div#pied de page...
dans l'entete j ai des onglets genre: home
j aimerai que quand on clique sur "home" la page "salons.html" apparaisse dans la div #navigation
est ce possible? j ai regardé sur les forums et il y aurait une solution en java mais la je n y comprend rien!
merci pour votre aide
2 réponses
-
faut passer par une iframe ou ajax
et java c'est pas du javascript. -
voila j ai suivi votre conseil, j ai opté pour de l ajax/php
je dois avoir cependant une erreure dans mon code...
j aimerai que les menus dans entete (accueil, presentation, salons de reception,...) ouvre dans la meme page (dans #principal) leurs contenu html
merci pour votre aide, car sans vous...!
voila ce que j ai au final:
mon fichier index
<link rel="stylesheet" type="text/css" href="style4.css" >
<div id="global">
<div id="entete">
<a href="index.html"><span class="espace1">Accueil</span></a>
<a href="presentation.html"><span class="espace2">Présentation</span></a>
<a href="reception.html"><span class="espace2">Salons de réception</span></a>
<a href="adresse.html"><span class="espace2">Adresse</span></a>
<a href="traiteur.html"><span class="espace2">Traiteur</span></a>
<a href="informations.html"><span class="espace2">Informations</span></a>
</div>
<div id="centre">
<div id="centre-bis">
<div id="navigation">
Réunion<br>
Séminaire<br>
Banquet<br>
Mariage<br>
communion<br>
Anniversaire<br>
Baptême<br>
Funérailles</div>
<div id="secondaire">menu a voir</div>
<div id="principal"></div>
</div>
</div>
<div id="pied">lien facebook</div>
</div>
<?php
if(isset($_GET['p']) && !empty($_GET['p'])) {
$p = htmlentities($_GET['p']);
switch($p) {
case 'Accueil': $principal = 'Contenu de la page "Accueil"';
break;
case 'Présentation': $principal = 'Contenu de la page "Présentation"';
break;
case 'Salons de réception': $principal = 'Contenu de la page "Salons de réception"';
break;
case 'contact': $principal = 'Contenu de la page "Adresse"';
break;
case 'Adresse': $principal = 'Contenu de la page "Traiteur"';
break;
case 'Informations': $principal = 'Contenu de la page "Informations"';
break;
default: $principal = 'Page inconnue';
break;
}
echo $principal;
}
?>
$(document).ready(function() {
var $principal_div = $('#principal div');
var page = $('#nav li a:first').text(); // par défaut c'est Accueil
// au clic sur un lien du menu
$('#nav li a').on('click', function() {
var url = $(this).attr('href'); // on récupère le href
// on récupère le nom de la page demandée
var pageDemandee = $(this).text();
// si on appelle une page qui n est pas celle affichée
if(pageDemandee != page) {
// on met en mémoire la page
page = pageDemandee;
// chargement dans la div
$.ajax({
url: url,
cache: false,
success: function(html) {
$principal_div.hide().html(html).fadeIn();
}
});
}
return false;
});
});
et voici mon css
.espace1{
margin-left:1em
}
.espace2{
margin-left:3em
}
/* Général */
body {
color: #F0E39E;
background: #EAECD6;
}
/* Navigation */
#navigation {
color: #BECD32;
background: #62584F;
font-family: Gabriola;
font-size: 25px;
}
/* Contenu principal */
#principal {
color: #62584F;
background: #EAECD6;
font-family: Gabriola;
font-size: 25px;
}
/* Contenu secondaire */
#secondaire {
color: #BECD32;
background: #62584F;
font-family: Gabriola;
font-size: 25px;
}
/* Entete */
#entete {
color: #000000;
background: #BECD32;
font-family: Gabriola;
font-size: 25px;
}
/* Pied */
#pied {
color: #000000;
background: #BECD32;
font-family: Gabriola;
font-size: 25px;
}
/* --- POSITIONNEMENT --- */
/* Page */
body {
padding: 60px 310px;
}
#global {
width: 90%;
max-width: 90em;
min-width: 1022px;
margin-left: auto;
margin-right: auto;
}
/* En-tête */
#entete {
height: 40px;
padding-top: 0px;
padding-bottom: 10px;
}
/* Bloc central */
#centre-bis {
width: 100%;
overflow: hidden;
}
/* Menu de navigation */
#navigation {
float: left;
width: 178px;
height: 450px;
padding-top: 20px;
padding-bottom: 5px;
padding-left: 30px;
}
/* Contenu principal */
#principal {
margin-left: 220px;
margin-right: 260px;
padding-top: 20px;
padding-bottom: 5px;
}
/* Contenu secondaire */
#secondaire {
float: right;
width: 208px;
height: 450px;
padding-top: 20px;
padding-bottom: 5px;
}
/* Pied de page */
#pied {
margin: 0;
height: 40px;
padding-top: 0px;
padding-bottom: 10px;
}
