11540 sujets

JavaScript, DOM et API Web HTML5

[Edité] Changer le css au clic sur un élément

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)
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)
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)
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
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[i].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.[/i]
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
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.
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
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>.
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>
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
Sujet clos
Aller à