Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
Pages : 1
#1 Re : Javascript » lien javascript vers une div sur la meme page » 08-02-2014 15:37:28
Bonjour à tous et toutes et attention au déterrage de topic! 
Plutôt débutant dans la conception de site, je cherche à faire la même chose qu'Atino a tenté, et j'avoue que je bloque un peu.
pour tenter de faire simple mais relativement structuré, j'ai fait un menu déroulant horizontal, avec forcément des liens qui renvoient à des pages. Sauf qu'une structure "simple" comme j'ai fait en première ébauche ne suffira pas à arriver au résultat attendu (j'aimerais implanté un historique de navigation sur ce site, et la possibilité de garder des articles en favoris).
Et je me suis donc dit (j'espère à juste titre 
) que la gestion de l'historique ne navigation serait plus simple si il y a une seule et unique page, avec les différents contenus imbriqués dans celle ci.
J'en suis rendu à ce point :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le Chocolat</title>
<link rel="stylesheet" media="screen" type="text/css" href="menu.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+="sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
</script>
</head>
<div style="text-align : center;">
<h1 class="centre">Le chocolat</h1>
<br />
<p style="text-indent:30px"><ul id="menu">
<li>
<a id="maya" href="#">Histoire et Origine</a>
<ul>
<li><a id="maya" href="#">Epoque Maya</a></li>
<li><a id="azteque" href="Azteque.html">Epoque Aztèque</a></li>
<li><a id="1494" href="1494.html">1494 - 1662</a></li>
<li><a id="1700" href="1700.html">1700 - 1950</a></li>
</ul>
</li>
<li>
<a id="fabrication" href="Fabrication.html">Techniques de Fabrication</a>
<ul>
<a id="fabrication" href="Fabrication.html">Fabrication</a>
<li><a id="ecabossage" href="Ecabossage.html">Les étapes</a>
<ul>
<li><a id="ecabossage" href="Ecabossage.html">Ecabossage, fermentation et séchage</a></li>
<li><a id="torrefaction" href="Torrefaction.html">Torréfaction, concassage et broyage</a></li>
<li><a id="ajout" href="Ajout.html">Ajout d'ingrédients et conchage</a></li>
<li><a id="moulage" href="Moulage.html">Tempérage et Moulage</a></li>
</ul></li>
<li><a id="blanchiment" href="Blanchiment.html">Blanchiment du chocolat</a></li>
</ul>
</li>
<li>
<a id="type" href="Type.html">Formes et Types de Chocolat</a>
<ul>
<li><a id="type" href="Type.html">Types de chocolat</a></li>
<li><a id="appelation" href="Appelation.html">Appélations spécifiques</a></li>
<li><a id="crus" href="Crus.html">Principaux crus de cacao</a></li>
<li><a id="formes" href="Formes.html">Différentes formes</a></li>
</ul>
<li><a id="degustation" href="Degustation.html">Consommation</a>
<ul>
<li><a id="degustation" href="Degustation.html">Dégustation</a></li>
<li><a id="consommation" href="Consommation.html">Consommation mondiale</a></li>
</ul></li>
</li>
<li>
<a id="effets" href="Effets.html">Santé</a>
<ul>
<li><a id="effets" href="Effets.html">Préambule</a></li>
<li><a id="circulatoire" href="Circulatoire.html">Effets prouvés</a>
<ul>
<li><a id="circulatoire" href="Circulatoire.html">Système circulatoire</a></li>
<li><a id="metaux" href="Metaux.html">Métaux lourds</a></li>
<li><a id="obesite" href="Obesite.html">Risques d'obésité</a></li>
<li><a id="psycho" href="Psycho.html">Psychostimulation</a></li>
<li><a id="benefices" href="Benefices.html">Autres bénéfices</a></li>
</ul></li>
<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Effets non prouvés</a>
<ul>
<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Aphrodisiaque</a></li>
<li><a id="acne" href="Acne.html">Acné</a></li>
<li><a id="addiction" href="Addiction.html">Addictions</a></li>
</ul></li>
<li><a id="animaux" href="Animaux.html">Chez les animaux</a></li>
</ul>
</li>
</ul>
<br />
<br />
</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#maya").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'maya.php',
async: true
}).responseText);
return false;
});
$("#azteque").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'azteque.php',
async: true
}).responseText);
return false;
});
$("#1494").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: '1494.php',
async: true
}).responseText);
return false;
});
$("#1700").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: '1700.php',
async: true
}).responseText);
return false;
});
$("#fabrication").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'fabrication.php',
async: true
}).responseText);
return false;
});
$("#ecabossage").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'ecabossage.php',
async: true
}).responseText);
return false;
});
$("#torrefaction").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'torrefaction.php',
async: true
}).responseText);
return false;
});
$("#ajout").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'ajout.php',
async: true
}).responseText);
return false;
});
$("#moulage").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'moulage.php',
async: true
}).responseText);
return false;
});
$("#blanchiment").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'blanchiment.php',
async: true
}).responseText);
return false;
});
$("#type").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'type.php',
async: true
}).responseText);
return false;
});
$("#appelation").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'appelation.php',
async: true
}).responseText);
return false;
});
$("#crus").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'crus.php',
async: true
}).responseText);
return false;
});
$("#formes").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'formes.php',
async: true
}).responseText);
return false;
});
$("#degustation").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'degustation.php',
async: true
}).responseText);
return false;
});
$("#consommation").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'consommation.php',
async: true
}).responseText);
return false;
});
$("#effets").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'effets.php',
async: true
}).responseText);
return false;
});
$("#circulatoire").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'circulatoire.php',
async: true
}).responseText);
return false;
});
$("#metaux").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'metaux.php',
async: true
}).responseText);
return false;
});
$("#obesite").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'obesite.php',
async: true
}).responseText);
return false;
});
$("#psycho").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'psycho.php',
async: true
}).responseText);
return false;
});
$("#benefices").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'benefices.php',
async: true
}).responseText);
return false;
});
$("#aphrodisiaque").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'aphrodisiaque.php',
async: true
}).responseText);
return false;
});
$("#acne").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'acne.php',
async: true
}).responseText);
return false;
});
$("#addiction").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'addiction.php',
async: true
}).responseText);
return false;
});
$("#animaux").click(function(e){
e.preventDefault();
$('#principal').empty().append($.ajax({
url: 'animaux.php',
async: true
}).responseText);
return false;
});
});
</script>
</body>
</html>
Explications :
dans le premier encadré : le haut de mon index.php, avec les différents scripts (pour mon menu, pour jquery entre autres), et la feuille de style.
dans le deuxième encadré : la liste dont je me sers pour mon menu. Avec comme seule entrée modifiée correctement (c'est mon test pour voir si ça fonctionne, et en l'occurence, non) :
Et enfin le troisième encadré avec le script sensé renvoyé le lien de la liste dans la div "principal".
Du coup, j'aimerais si possible solliciter votre aide pour m'aider à comprendre ce que j'oublie, ou ce que je fais mal, parce qu'en bon "autodidacte", j'avoue avoir quelques difficultés.
Je reste à votre disposition, et vous remercie dans tous les cas, ne serait-ce que pour l'aide qu'a pu me procurer la lecture de quelques topics de ce forum!
Lucas
Pages : 1