Changer de class CSS en cliquant sur un lien

Par Marc Prøux, il y a 11 ans

Javascript

Bonjour, je suis un débutant en JavaScript et aujourd'hui j'ai un problème.
Je souhaite créer un site sur une seule page et lorsque je souhaite changer, par exemple de contenu qui sont dans des div (cf le code qui va suivre) le JS ne fait rien.

<div id="index1" class="index_select"> <h2>Home</h2> </div> <div id="index2" class="index_unselect"> <h2>Présentation</h2> </div> <div id="index3" class="index_unselect"> <h2>Curriculum vitae</h2> </div> <div id="index4" class="index_unselect"> <h2>Me contacter</h2> </div>

J'ai mis en place le code JS suivant dont je sais qui ne fonctionne pas ou alors qui ne souhaite pas fonctionner, je ne sais pas.

$('div #index1').on('click', function() { $(this).removeClass('index_unselect').addClass('index_select'); }); $('div #index2').on('click', function() { $('div #index1').removeClass('index_select').addClass('index_unselect'); $(this).removeClass('index_unselect').addClass('index_select'); }); $('div #index3').on('click', function() { $('div #index2').removeClass('index_select').addClass('index_unselect'); $(this).removeClass('index_unselect').addClass('index_select'); }); $('div #index4').on('click', function() { $('div #index3').removeClass('index_select').addClass('index_unselect'); $(this).removeClass('index_unselect').addClass('index_select'); });

J'éspère que vous saurez m'éclairer.
Cordialement, Marc.

4 réponses

Genesis, il y a 11 ans

Hello,

Je pense que le problème vient de tes sélecteurs.
En effet, tu sélectionnes "div #indexY" et donc tu lui dit de sélectionner l'id "indexY" à l'intérieur d'une div. Or toi tu veux sélectionner la div qui a l'id "indexY".
Du coup, "div #indexY" devient "div#indexY" ou tout simplement "indexY".

Azorgh, il y a 11 ans

Salut à toi Marc,

Petite rectification sur le message de Genesis (très bon groupe au passage :) ).
Du coup, "div #indexY" devient "div#indexY" ou tout simplement "indexY".

Ou tout simplement

$("#indexY").[....];

C'est un détail mais je préferais le mettre :)

Bon courage pour la suite.

Marc Prøux, il y a 11 ans

Une autre petite question, lorsqu'on souhaite faire ceci mais lorsque l'on clique sur un menu, les sélecteurs sont, basiquement : 'nav ul li a#nav1' ou simplement 'a#nav1' ?

Et sans vouloir vous embêter vu mon ingratitude qui va suivre :/
Il y a une différence en des quote et des doubles quotes ?

Azorgh, il y a 11 ans

Concernant les selecteurs, cela dépend de ton HTML.

Si tu met simplement

$("a#nav1")...;

, ca va fonctionner. Par contre, si par malheur dans ton code tu te retrouve avec un autre lien qui a l'id nav1, et bien la fonction s’exécutera sur les deux. Après peu importe les selecteurs, tant que ta fonction fait ce que tu veux au bon endroit ! Tu peux utiliser la sécurité dans ce cas, en mettant "toute l’arborescence", c'est à dire :

$("nav > ul > li > a#nav1").[...];

A toi de voir après. (Je sais pas ce qu'en pense les autres).

Sur ta question des simples / doubles quotes, il n'y aucune différence en terme d'execution du code.
Après tu regardes sur le net, sur StackOverFlow, tu auras tes réponses ;)

N'oublie pas de mettre en résolu le post si c'est bon, en cliquant sur les réponses qui t'ont aidés !

Cordialement,
PallMallShow