Auteur
Johan_Clbrt
#
102 Posts
Bonjour !

pour mon site internet je veux faire un menu dynamique. En effet, je veux modifier au clic une propriété CSS.

Je m'explique :
upload/47859-menu.jpg

En gros : j'ai 16 blocs superposés avec le même z-index.

Je voudrais que ça se passe ainsi :
a écrit :

SI l'utilisateur clique sur un des numéros,

CHANGE le z-index du bloc correspondant;

SI l'utilisateur choisit un autre numéro,

REMETS le z-index normal au précédent ET CHANGE le sur le nouveau n° sélectionné

SI l'utilisateur n'en choisit pas un autre laisse le z-index modifié.


Mais j'ai beau avoir lu le cours sur le JS j'ai beaucoup de mal à piger la logique du language.

Je suis pas un zéro mais un -1 Smiley rolleyes

Donc si une âme charitable accepte de m'aider je lui en serait fortement reconnaissant !

Merci,

Johan Smiley cligne
Modifié par Johan_Clbrt (06 Jul 2013 - 12:48)

^
6l20
#
Les kiwis...quand je veux !
Modérateur
3840 Posts
Hello,

Ça prend forme, hâte de voir le site terminé Smiley cligne

Si tu utilises déjà la librairie jQuery, je suppose qu'un truc du genre doit pouvoir fonctionner :
$('li').click(function() { 
  $('li').removeClass('active'); 
  $(this).addClass('active'); 
});

.active {
  z-index:1;
}

Sinon, en js pur tu dois pouvoir trouver facilement sur la toile Smiley cligne
Modifié par 6l20 (06 Jul 2013 - 14:51)

One life live it :)

^
Johan_Clbrt
#
102 Posts
Bonjour Sylvain,

merci de ta réponse ! Smiley cligne

Mais du coup je ne sais pas trop commet l'intégrer à mon code :
<script type='text/javascript' src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type='text/javascript'>$('li').click(function() { 
  $('li').removeClass('active'); 
  $(this).addClass('active'); 
});</script>

<ul>
    
<li id="ligne1"><img src="http://johanchalibert.comze.com/ligne1.png" alt="Ligne 1"  /></li>

<li id="ligne2"><img src="http://johanchalibert.comze.com/ligne2.png" alt="Ligne 2"  /></li>

<li id="ligne3"><img src="http://johanchalibert.comze.com/ligne3.png" alt="Ligne 3"  /></li>

<li id="ligne3b"><img src="http://johanchalibert.comze.com/ligne3b.png" alt="Ligne 3b"  /></li>

<li id="ligne4"><img src="http://johanchalibert.comze.com/ligne4.png" alt="Ligne 4"  /></li>

<li id="ligne5"><img src="http://johanchalibert.comze.com/ligne5.png" alt="Ligne 5" /></li>

<li id="ligne6"><img src="http://johanchalibert.comze.com/ligne6.png" alt="Ligne 6"  /></li>

<li id="ligne7"><img src="http://johanchalibert.comze.com/ligne7.png" alt="Ligne 7"  /></li>

<li id="ligne7b"><img src="http://johanchalibert.comze.com/ligne7b.png" alt="Ligne 7b" /></li>

<li id="ligne8"><img src="http://johanchalibert.comze.com/ligne8.png" alt="Ligne 8"  /></li>

<li id="ligne9"><img src="http://johanchalibert.comze.com/ligne9.png" alt="Ligne 9"  /></li>

<li id="ligne10"><img src="http://johanchalibert.comze.com/ligne10.png" alt="Ligne 10" /></li>

<li id="ligne11"><img src="http://johanchalibert.comze.com/ligne11.png" alt="Ligne 11" /></li>

<li id="ligne12"><img src="http://johanchalibert.comze.com/ligne12.png" alt="Ligne 12" /></li>

<li id="ligne13"><img src="http://johanchalibert.comze.com/ligne13.png" alt="Ligne 13" /></li>

<li id="ligne14"><img src="http://johanchalibert.comze.com/ligne14.png" alt="Ligne 14" /></li>

</ul>

<br />

<div id="bloc-ligne1">
<!-- Contenu -->
</div>

<div id="bloc-ligne2">
<!-- Contenu -->
</div>
<div id="bloc-ligne3">
<!-- Contenu -->
</div>

<div id="bloc-ligne3b">
<!-- Contenu -->
</div>

<div id="bloc-ligne4">
<!-- Contenu -->
</div>

<div id="bloc-ligne5">
<!-- Contenu -->
</div>
<div id="bloc-ligne6">
<!-- Contenu -->
</div>

<div id="bloc-ligne7">
<!-- Contenu -->
</div>

<div id="bloc-ligne7b">
<!-- Contenu -->
</div>

<div id="bloc-ligne8">
<!-- Contenu -->
</div>

<div id="bloc-ligne9">
<!-- Contenu -->
</div>

<div id="bloc-ligne10">
<!-- Contenu -->
</div>

<div id="bloc-ligne11">
<!-- Contenu -->
</div>

<div id="bloc-ligne12">
<!-- Contenu -->
</div>

<div id="bloc-ligne13">
<!-- Contenu -->
</div>

<div id="bloc-ligne14">
<!-- Contenu -->
</div>

<style>
ul {
with: 666px;
}

li {
    display:inline-block;
    width:41px;
    text-align:center
    list-style-type: none;
}

div #bloc-ligne1 {
    width: 716px;
    height:170px;
    background-color: #343434;
    border-radius: 7px 7px 7px 7px;
}

div #bloc-ligne2 {
    width: 716px;
    height:170px;
    background-color: #343434;
    border-radius: 7px 7px 7px 7px;
    position: absolute;
    z-index: 1;
    top: 60px;
    left: 0;
}

div #bloc-ligne3 {
    width: 716px;
    height:170px;
    background-color: #343434;
    border-radius: 7px 7px 7px 7px;
    position: absolute;
    z-index: 1;
    top: 60px;
    left: 0;
}
</style>


Je n'ai pas repété le code CSS pour chacun des blocs vu que c'est toujours la même chose... Smiley cligne

Merci de votre aide!

Johan
Modifié par Johan_Clbrt (06 Jul 2013 - 14:56)

^
6l20
#
Les kiwis...quand je veux !
Modérateur
3840 Posts
Hello Johan,

Au regard de ton code, ça devrait être un peu plus compliqué que prévu Smiley murf

[apparté]
Il n'y a pas de liens dans tes li ?
À noter, comme te l'a expliqué Zelalsan (sur un autre de tes sujets), le "display:inline-block" sur tes li provoque un espace indésirable qui pourra éventuellement te poser problème par la suite Smiley cligne
[/off]

Concernant le JavaScript, même si je visualise assez bien ce qu'il convient de faire, j'ai du mal à le mettre "en forme" (je suis également une chèvre à mon grand regret Smiley sweatdrop ).

Je vais essayer de regarder ça de mon côté, mais je ne te promet rien, et si une gentille âme, bien plus à l'aise que nous avec ce langage d'hérétique, a la gentille envie de filer un coup de main, ce ne sera pas de refus Smiley smile

ps : Que celui qui pondra un code de 3 lignes écrit en 5 secondes soit maudit sur sept générations Smiley lol

One life live it :)

^
Zelalsan
#
912 Posts
salut,
perso je te proposerais de donner un ID à ton <ul> pour pouvoir récupérer tes li. Le principe reste grosso modo le même à une chose près, c'est que tu dois enlever la classe "active" du précédent <li> pour que le z-index que tu appliques au nouveau prenne effet quel que soit son ordre dans la liste. Le plus simple est de faire une boucle pour remettre toutes les classes à zéro, puis de donner la classe "active" à l'élément cliqué.

<u id="MaListe">
    
<li id="ligne1"><img src="http://johanchalibert.comze.com/ligne1.png" alt="Ligne 1"  /></li>

<li id="ligne2"><img src="http://johanchalibert.comze.com/ligne2.png" alt="Ligne 2"  /></li>

...

</ul>


var maListe = document.querySelectorAll("#MaListe li");

function liClique(e){
	var cur = e.target || e.srcElement;

	for(var i=0, l=maListe.length; i<l; i++){
		maListe.className = "";
	}
	
	cur.className = "active";
}

maListe.addEventListener ? maListe.addEventListener("click", liClique, false) : maListe.attachEvent("onclick", liClique);

Par contre ce code ne marchera pas sur IE7 mais tu peux l'adapter.


Pour réussir dans la vie, il y a deux choses essentielles :
1 - Ne jamais révéler tout ce que l'on sait.

^
Johan_Clbrt
#
102 Posts
Bonjour Zelalsan !

J'ai tenté d'appliquer votre code mais ça ne fonctionne pas chez moi...


<script type="text/javascript"
   src="http://code.jquery.com/jquery-1.10.2.js"></script>
<ul id="MaListe">
<script type="text/javascript">
var maListe = document.querySelectorAll("#MaListe li");

function liClique(e){
	var cur = e.target || e.srcElement;

	for(var i=0, l=maListe.length; i<l; i++){
		maListe.className = "";
	}
	
	cur.className = "active";
}

maListe.addEventListener ? maListe.addEventListener("click", liClique, false) : maListe.attachEvent("onclick", liClique);
</script>

    <li id="ligne1"><img src="http://johanchalibert.comze.com/ligne1.png" alt="Ligne 1"  /></li><li id="ligne2"><img src="http://johanchalibert.comze.com/ligne2.png" alt="Ligne 2"  /></li><li id="ligne3"><img src="http://johanchalibert.comze.com/ligne3.png" alt="Ligne 3"  /></li><li id="ligne3b"><img src="http://johanchalibert.comze.com/ligne3b.png" alt="Ligne 3b"  /></li><li id="ligne4"><img src="http://johanchalibert.comze.com/ligne4.png" alt="Ligne 4"  /></li>
<li id="ligne5"><img src="http://johanchalibert.comze.com/ligne5.png" alt="Ligne 5" /></li><li id="ligne6"><img src="http://johanchalibert.comze.com/ligne6.png" alt="Ligne 6"  /></li><li id="ligne7"><img src="http://johanchalibert.comze.com/ligne7.png" alt="Ligne 7"  /></li>
<li id="ligne7b"><img src="http://johanchalibert.comze.com/ligne7b.png" alt="Ligne 7b" /></li>
<li id="ligne8"><img src="http://johanchalibert.comze.com/ligne8.png" alt="Ligne 8"  /></li>
<li id="ligne9"><img src="http://johanchalibert.comze.com/ligne9.png" alt="Ligne 9"  /></li>
<li id="ligne10"><img src="http://johanchalibert.comze.com/ligne10.png" alt="Ligne 10" /></li>
<li id="ligne11"><img src="http://johanchalibert.comze.com/ligne11.png" alt="Ligne 11" /></li>
<li id="ligne12"><img src="http://johanchalibert.comze.com/ligne12.png" alt="Ligne 12" /></li>
<li id="ligne13"><img src="http://johanchalibert.comze.com/ligne13.png" alt="Ligne 13" /></li>
<li id="ligne14"><img src="http://johanchalibert.comze.com/ligne14.png" alt="Ligne 14" /></li>
</ul>
<br />
<div id="bloc-ligne1">
<div class="colonne1">
<h2 class="ligne">
La ligne 1
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>

<div id="bloc-ligne2">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>

<div id="bloc-ligne3">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>
<div id="bloc-ligne4">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>


<style>
ul {
with: 666px;
}

li {
display:inline-block;
width:41px;
text-align:center
list-style-type: none;
}
div #bloc-ligne1 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
z-index: 1;
}
div #bloc-ligne2 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
div #bloc-ligne3 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
div #bloc-ligne4 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
.fleche1 {
position: absolute;
top: 45px;
left: 0;
}
.colonne1, .colonne2, .colonne3 {
display: inline-block;
}
.colonne1 {
width: 25%;
}
.colonne2 {
width: 40%;
}
.colonne3 {
width: 34%;
}
.colonne1, .colonne2, .colonne3 {
display: inline-block;
}
.ligne {
font-family: Aller, 'Trebuchet MS', Arial;
font-weight: 100;
font-size: 23px;
color: #dedede;
left: 30px;
bottom: 70px;
}
.Illustration-ligne {
position: absolute;
bottom: 20px;
left: 30px;
}

.active {
  z-index: 25;
}
</style>


Où ai-je fait une bêtise ?

Merci Smiley cligne

^
Zelalsan
#
912 Posts
Il faudrait déjà mettre un "z-index:0" par défaut à ton ul (on ne sait jamais) mais tu as surtout mis ta balise <ul> dans le script. Le script quant à lui doit être placé en dernier dans le document si non il ne pourra pas être fonctionnel.
PS : pour ce script précis, tu n'as pas besoin de JQuery.

Pour réussir dans la vie, il y a deux choses essentielles :
1 - Ne jamais révéler tout ce que l'on sait.

^
Johan_Clbrt
#
102 Posts
Salut !

J'ai essayé de corriger comme tu me l'as indiqué mais ça ne marche pas... Smiley confus

<script type="text/javascript">
var maListe = document.querySelectorAll("#MaListe li");

function liClique(e){
	var cur = e.target || e.srcElement;

	for(var i=0, l=maListe.length; i<l; i++){
		maListe.className = "";
	}
	
	cur.className = "active";
}

maListe.addEventListener ? maListe.addEventListener("click", liClique, false) : maListe.attachEvent("onclick", liClique);
</script>

<ul id="MaListe">
    <li id="ligne1"><img src="http://johanchalibert.comze.com/ligne1.png" alt="Ligne 1"  /></li><li id="ligne2"><img src="http://johanchalibert.comze.com/ligne2.png" alt="Ligne 2"  /></li><li id="ligne3"><img src="http://johanchalibert.comze.com/ligne3.png" alt="Ligne 3"  /></li><li id="ligne3b"><img src="http://johanchalibert.comze.com/ligne3b.png" alt="Ligne 3b"  /></li><li id="ligne4"><img src="http://johanchalibert.comze.com/ligne4.png" alt="Ligne 4"  /></li>
<li id="ligne5"><img src="http://johanchalibert.comze.com/ligne5.png" alt="Ligne 5" /></li><li id="ligne6"><img src="http://johanchalibert.comze.com/ligne6.png" alt="Ligne 6"  /></li><li id="ligne7"><img src="http://johanchalibert.comze.com/ligne7.png" alt="Ligne 7"  /></li>
<li id="ligne7b"><img src="http://johanchalibert.comze.com/ligne7b.png" alt="Ligne 7b" /></li>
<li id="ligne8"><img src="http://johanchalibert.comze.com/ligne8.png" alt="Ligne 8"  /></li>
<li id="ligne9"><img src="http://johanchalibert.comze.com/ligne9.png" alt="Ligne 9"  /></li>
<li id="ligne10"><img src="http://johanchalibert.comze.com/ligne10.png" alt="Ligne 10" /></li>
<li id="ligne11"><img src="http://johanchalibert.comze.com/ligne11.png" alt="Ligne 11" /></li>
<li id="ligne12"><img src="http://johanchalibert.comze.com/ligne12.png" alt="Ligne 12" /></li>
<li id="ligne13"><img src="http://johanchalibert.comze.com/ligne13.png" alt="Ligne 13" /></li>
<li id="ligne14"><img src="http://johanchalibert.comze.com/ligne14.png" alt="Ligne 14" /></li>
</ul>
<br />
<div id="bloc-ligne1">
<div class="colonne1">
<h2 class="ligne">
La ligne 1
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>

<div id="bloc-ligne2">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>

<div id="bloc-ligne3">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>
<div id="bloc-ligne4">
<div class="colonne1">
<h2 class="ligne">
La ligne 2
</h2>
<img src="http://johanchalibert.comze.com/photoligne1.jpg" alt="Illustration ligne 1" class="Illustration-ligne" />
</div>
<div class="colonne2">
<br />
<br />
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; margin-bottom: 10px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede;">
Découvrir son histoire, ses secrets
</a></div>
<div style="color: #dedede; height: 26px; background-color: #52514e; width: 245px; margin-left: 10px; font-size: 15px; padding-left: 10px;padding-top: 6px; margin-top: 8px; border-radius: 4px; "><a href="#" title="Découvrir l'histoire de la ligne" style="color: #dedede; font-weight: 200;">
Découvrir le matériel roulant
</a></div>
</div>
<div class="colonne3" color="#cdcdcd">
• La ligne possède une station désaffectée<br />
• C'est la plus ancienne ligne (1900)<br />
• Elle est automatique depuis 2011<br />
• Le matériel qui y circule est le MP05
</div>
</div>


<style>
ul {
with: 666px;
}

li {
display:inline-block;
width:41px;
text-align:center
list-style-type: none;
}
div #bloc-ligne1 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
z-index: 1;
}
div #bloc-ligne2 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
div #bloc-ligne3 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
div #bloc-ligne4 {
width: 716px;
height:170px;
background-color: #343434;
border-radius: 7px 7px 7px 7px;
position: absolute;
z-index: 1;
top: 60px;
left: 0;
}
.fleche1 {
position: absolute;
top: 45px;
left: 0;
}
.colonne1, .colonne2, .colonne3 {
display: inline-block;
}
.colonne1 {
width: 25%;
}
.colonne2 {
width: 40%;
}
.colonne3 {
width: 34%;
}
.colonne1, .colonne2, .colonne3 {
display: inline-block;
}
.ligne {
font-family: Aller, 'Trebuchet MS', Arial;
font-weight: 100;
font-size: 23px;
color: #dedede;
left: 30px;
bottom: 70px;
}
.Illustration-ligne {
position: absolute;
bottom: 20px;
left: 30px;
}

.active {
  z-index: 25;
}

ul #MaListe {
z-index: 0;
}
</style>


Merci d'avance de ton aide!

Johan Smiley cligne

^
Zelalsan
#
912 Posts
Comme déjà dit, le script doit être placé en fin de document... S'il vient avant ton <ul>, il ne pourra pas récupérer les éléments dont il a besoin, donc mettre le script juste avant </body>.

Pour réussir dans la vie, il y a deux choses essentielles :
1 - Ne jamais révéler tout ce que l'on sait.

^
RenyonParis
#
12 Posts
Bonjour,

Déjà, il semble que tu utilise jQuery… Alors, autant l'utiliser… Smiley smile

Voici un code adapté à jQuery :
<script type="text/javascript">

jQuery(document).ready(function($) {
	var maListe = $('#MaListe li');

	function liClique(e){
		var cur = e.target || e.srcElement;

		for(var i=0; i<maListe.length; i++){
			maListe.removeClass();
		}
		
		cur.addClass('active');
	}

	$('#MaListe').on('click', 'li', function(){
		liClique();
	});
});
</script>


^
Johan_Clbrt
#
102 Posts
Bonjour à tous !

Merci de vous être penchés sur mon code ! Smiley biggrin J'ai un ami qui m'a fait ce code en Jquery :

$(document).ready(function() {
 
    $('ul li[id^="ligne"]').click(function() {
 
        $('div[id^="bloc-ligne"]').hide().filter('[id="bloc-'+$(this).attr('id')+'"]').show();
 
    });
 
});


Bonne journée Smiley smile

^