Probleme avec texte cliquable+description qui apparait en dessous

Marsh Posté le 16-10-2008 à 11:21:46

Salut,

Voila j'essaye depuis 3 jours de codé une page, mais je n'y arrive pas et je ne suis pas non plus un codeur professionnel .

Donc voila ce que je veut faire.

J'ai 3 ligne:

1-blabla
2-anfdnpogps
3-ngoposgpnpg

Lorsque l'on clic sur blabla sa donnerais un truc dans ce type la :

Blabla
-le blabla jdfpsjngpsngp

et lorsque je clic sur le texte2 ben le text 1 se ferme et le deux s'ouvre.

Chez pas si vous avais compris

Voici mon code

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ceci est une page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.details { display:none; }
</style>
</head>
<body>
<h2>Page de test</h2>
<ul>
<li><a href="#" onclick="details(1)">Admin Novice</a></li>
<li><a href="#" onclick="details(2)">Admin Expert</a></li>
<li><a href="#" onclick="details(3)">Admin Senior</a></li>
</ul>
<div class="details" id="details_1">Blablablabvla</div>
<div class="details" id="details(2)">BlablablabvlaBlablablabvla</div>
<div class="details" id="details(3)">BlablablabvlaBlablablabvlaBlablablabvla</div>
<script>
function details(id_)
{
for(var i=1; i <= 3; i++) { document.getElementById("details_"+i).style.display = "none"; }
document.getElementById("details_"+id_).style.display = "block";
}
</script>
</body>
</html>

merci par avance

Reply

Marsh Posté le 16-10-2008 à 11:21:46

Reply

Marsh Posté le 16-10-2008 à 13:03:30

Salut,

Je te propose une solution trés proche de ton code.
J'ai fait un essai que j'ai mis sur mon serveur:
http://www.artweweb.com/Forum/casacade.html

Voici le principe.
J'ai associé des menus et sous menus avec les balises <ul> et <li>:

Code :

<ul id="ulMain">
<li id="Main1" onclick="Toogle(this.id)">Menu1</li>
<ul id="Main1S1" style="display:none">
<li>Menu1:Sous-Menu1</li>
<li>Menu1:Sous-Menu2</li>
</ul>
<li id="Main2" onclick="Toogle(this.id)">Menu2</li>
<ul id="Main2S1" style="display:none">
<li>Menu2:Sous-Menu1</li>
<li>Menu2:Sous-Menu2</li>
</ul>
<li id="Main3" onclick="Toogle(this.id)">Menu3</li>
<ul id="Main3S1" style="display:none">
<li>Menu3:Sous-Menu1</li>
<li>Menu3:Sous-Menu2</li>
</ul>
</ul>

J'ai nommé chaque menu: ici Main1, Main2 et Main3.
J'ai ensuite attribué un nom aux sous menus en rajoutant un suffixe au nom du menu parent: Main1S1, Main2S2, Main2S3.

J'ai fait un petit script avec comme paramètre l'identifiant du menu principal qui gère l'affichage des sous-menu avec le paramètre Display:

Code :

function Toogle(id)
{
for(var i=1; i <= 3; i++)
{
document.getElementById("Main"+i+"S1" ).style.display = "none";
}
document.getElementById(id+"S1" ).style.display = "block";
}

Tu vois, c'est très proche de ton code.

J'espère que c'est ce que tu souhaitais.

Elx

Message édité par Elx le 16-10-2008 à 13:13:09

---------------
Elx: http://www.artweweb.com

Reply

Marsh Posté le 16-10-2008 à 14:38:33

je te remercie de ton aide mais en faite j'ai trouver mon bonheur

Je met le code pour ceux qui chercher comme moi la solution:

Spoiler :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ceci est une page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

.details { display:none; }

</style>
</head>
<body>
<h2>Page de test</h2>

<ul>
<li><a href="#" onclick="details(1)">Nom du texte 1</a></li>
<li><a href="#" onclick="details(2)">Nom du texte 2</a></li>
<li><a href="#" onclick="details(3)">Nom du texte 3</a></li>
</ul>

<div class="details" id="details_1">Le texte qui va apparaitre sous le nom du texte 1</div>
<div class="details" id="details_2">Le texte qui va apparaitre sous le nom du texte 2</div>
<div class="details" id="details_3">Le texte qui va apparaitre sous le nom du texte 3</div>

<script>
function details(id_)
{
for(var i=1; i <= 3; i++) { document.getElementById("details_"+i).style.display = "none"; }
document.getElementById("details_"+id_).style.display = "block";
}

</script>

</body>
</html>

Message édité par shadou le 16-10-2008 à 14:39:53

Reply

Probleme avec texte cliquable+description qui apparait en dessous

Sujets relatifs:

Leave a Replay