Bonjour,
Je veux faire un site web pour consulter un livre, avec une navigation pratique. J'ai donc décidé qu'il y aurait un menu à gauche pour choisir les chapitres, parties, sections, et une partie à droite où le texte apparaît.
Étant donné que je n'ai jamais fait ça, j'ai fait un test en faisant une petite page répétant mon principe, avec 3 chapitres, 3 parties par chapitre et 3 sections par partie.
Et devinez quoi... roulement de tambour................. ça ne fonctionne pas!
J'ai seulement codé le premier chapitre à date. Avec ce que j'ai fait, d'après ma compréhension actuelle, on devrait voir apparaître le nom de la section "1.1.2, 1.2.3..." à droite. C'est ma façon, dans cette page de pratique, de voir que le texte que je mettrai à la place de ces chiffres (ex. 1.1.2) apparaîtra.
Jusqu'ici, je n'ai codé que le chapitre 1. La partie 1 fonctionne, mais vous pouvez voir si vous copiez-collez ce code dans une page que pour les parties 2 et 3, c'est tout le chapitre 1 qui apparaît à droite :
----------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function chap1()
{
document.getElementById("chap1").style.display="inherit";
document.getElementById("chap2").style.display="none";
document.getElementById("chap3").style.display="none";
}
function chap2()
{
document.getElementById("chap1").style.display="none";
document.getElementById("chap2").style.display="inherit";
document.getElementById("chap3").style.display="none";
}
function chap3()
{
document.getElementById("chap1").style.display="none";
document.getElementById("chap2").style.display="none";
document.getElementById("chap3").style.display="inherit";
}
function part1()
{
document.getElementById("part1").style.display="inherit";
document.getElementById("part2").style.display="none";
document.getElementById("part3").style.display="none";
}
function part2()
{
document.getElementById("part1").style.display="none";
document.getElementById("part2").style.display="inherit";
document.getElementById("part3").style.display="none";
}
function part3()
{
document.getElementById("part1").style.display="none";
document.getElementById("part2").style.display="none";
document.getElementById("part3").style.display="inherit";
}
function sec1()
{
document.getElementById("sec1").style.display="inherit";
document.getElementById("sec2").style.display="none";
document.getElementById("sec3").style.display="none";
}
function sec2()
{
document.getElementById("sec1").style.display="none";
document.getElementById("sec2").style.display="inherit";
document.getElementById("sec3").style.display="none";
}
function sec3()
{
document.getElementById("sec1").style.display="none";
document.getElementById("sec2").style.display="none";
document.getElementById("sec3").style.display="inherit";
}
//-->
</script>
</head>
<body>
<div id="boutons" style="position:absolute; left:20px;">
<div name="chap1">
<div name="part1">
<div name="sec1">
<a onclick="chap1();part1();sec1();">1.1.1</a>
</div>
<div name="sec2">
<a onclick="chap1();part1();sec2();">1.1.2</a>
</div>
<div name="sec3">
<a onclick="chap1();part1();sec3();">1.1.3</a>
</div>
</div>
<div name="part2">
<div name="sec1">
<a onclick="chap1();part2();sec1();">1.2.1</a>
</div>
<div name="sec2">
<a onclick="chap1();part2();sec2();">1.2.2</a>
</div>
<div name="sec3">
<a onclick="chap1();part2();sec3();">1.2.3</a>
</div>
</div>
<div name="part3">
<div name="sec1">
<a onclick="chap1();part3();sec1();">1.3.1</a>
</div>
<div name="sec2">
<a onclick="chap1();part3();sec2();">1.3.2</a>
</div>
<div name="sec3">
<a onclick="chap1();part3();sec3();">1.3.3</a>
</div>
</div>
</div>
<div name="chap2">
<div name="part1">
<div name="sec1">
2.1.1
</div>
<div name="sec2">
2.1.2
</div>
<div name="sec3">
2.1.3
</div>
</div>
<div name="part2">
<div name="sec1">
2.2.1
</div>
<div name="sec2">
2.2.2
</div>
<div name="sec3">
2.2.3
</div>
</div>
<div name="part3">
<div name="sec1">
2.3.1
</div>
<div name="sec2">
2.3.2
</div>
<div name="sec3">
2.3.3
</div>
</div>
</div>
<div name="chap3">
<div name="part1">
<div name="sec1">
3.1.1
</div>
<div name="sec2">
3.1.2
</div>
<div name="sec3">
3.1.3
</div>
</div>
<div name="part2">
<div name="sec1">
3.2.1
</div>
<div name="sec2">
3.2.2
</div>
<div name="sec3">
3.2.3
</div>
</div>
<div name="part3">
<div name="sec1">
3.3.1
</div>
<div name="sec2">
3.3.2
</div>
<div name="sec3">
3.3.3
</div>
</div>
</div>
</div>
<div id="texte" style="position:absolute; left:80px;">
<div id="chap1">
<div id="part1">
<div id="sec1">
1.1.1
</div>
<div id="sec2">
1.1.2
</div>
<div id="sec3">
1.1.3
</div>
</div>
<div id="part2">
<div id="sec1">
1.2.1
</div>
<div id="sec2">
1.2.2
</div>
<div id="sec3">
1.2.3
</div>
</div>
<div id="part3">
<div id="sec1">
1.3.1
</div>
<div id="sec2">
1.3.2
</div>
<div id="sec3">
1.3.3
</div>
</div>
</div>
<div id="chap2">
<div id="part1">
<div id="sec1">
2.1.1
</div>
<div id="sec2">
2.1.2
</div>
<div id="sec3">
2.1.3
</div>
</div>
<div id="part2">
<div id="sec1">
2.2.1
</div>
<div id="sec2">
2.2.2
</div>
<div id="sec3">
2.2.3
</div>
</div>
<div id="part3">
<div id="sec1">
2.3.1
</div>
<div id="sec2">
2.3.2
</div>
<div id="sec3">
2.3.3
</div>
</div>
</div>
<div id="chap3">
<div id="part1">
<div id="sec1">
3.1.1
</div>
<div id="sec2">
3.1.2
</div>
<div id="sec3">
3.1.3
</div>
</div>
<div id="part2">
<div id="sec1">
3.2.1
</div>
<div id="sec2">
3.2.2
</div>
<div id="sec3">
3.2.3
</div>
</div>
<div id="part3">
<div id="sec1">
3.3.1
</div>
<div id="sec2">
3.3.2
</div>
<div id="sec3">
3.3.3
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------
Ne faites pas attention à tout ce qui manque dans mon code, c'est seulement un test.
Quelqu'un a une idée de mon problème?
Merci.
