Échangez le style CSS d'un groupe d'éléments sur le clic

Question

J'ai trouvé un fil, Change an element's class with JavaScript, qui est dans le sens de ce que je vais faire, mais je ne sais pas comment l'implémenter.

J'ai une page avec 4 boutons d'entrée et deux styles CSS: "Selected" et "notSelected". Un bouton sera initialement codé en tant que "Sélectionné". Lorsque l'utilisateur clique sur un autre bouton, je voudrais programmer itérer tous les boutons (le nombre de boutons sur chaque page sera entre 2 et 10), définir la classe du bouton cliqué sur "Sélectionné", et assurez-vous que tous les autres les boutons sont réglés sur "non sélectionné". J'ai la logique en panne, mais je n'ai jamais rien fait avec JavaScript avant, donc je n'ai pas la moindre idée sur la façon de faire cela. Si quelqu'un connaît déjà un tutoriel/un code qui fait cela, veuillez me diriger dans la bonne direction.

Merci beaucoup!

Answer 1

Vous pouvez aller à la façon simple et utiliser un cadre comme jQuery qui fait le travail pour vous

Answer 2

Comme vous débutez JavaScript, cela pourrait être un peu beaucoup, mais avez-vous envisagé d'utiliser jquery? Jetez un coup d'oeil à toggleClass(): http://api.jquery.com/toggleClass/

Answer 3

Salut juste fait un script rapide, j'espère que cela vous aide. Faites-moi savoir si vous trouvez un problème avec le script. J'utilise l'événement de mise au point et la boîte de saisie, vous pouvez le changer selon les besoins.

fonction doSelect (obj) {var mylist = document.getElementById ("formDiv") var inputItems = mylist.getElementsByTagName ("entrée"); pour (i = 0; i < inputItems.length; i ++) { document.getElementById (inputItems [i] .id) .className = "Notselected"; } document.getElementById (obj.id).className = "selected"; }

ont une étiquette de forme dans la balise div id = "formDIV"

Avoir quelques balises d'entrée de texte de type et onfocus = "doSelect (this)"

<corps> < div id = " formDiv " > < forme name = " TestForm " > type d'entrée < = " texte " name = " TX1 " id = " text1 " onfocus = " doSelect (this) "/> < type d'entrée = " texte " name = " tx2 " id = " texte2 " onfocus = " doSelect (this) "/> < entrée t ype = " texte " name = " TX3 " id = " text3 " onfocus = " doSelect (this) "/> type d'entrée < = " texte " name = " tx4 " id = " text4 " onfocus = " doSelect (this) "/> < Type d'entrée = " text " name = " TX5 " id = " text5 " onfocus = " doSelect (this) "/> </form > </div > </corps >

cela devrait aide.