Styler l'onglet actif d'un menu
Anouchka2586
Messages postés
50
Date d'inscription
Statut
Membre
Dernière intervention
-
Totogros -
Totogros -
Bonjour
J'utilise ce template https://templated.co/plaindisplay
J'aimerais que l'onglet actif prenne le style du premier onglet et j'ai mis ceci mais ça marche pas :
Merci
J'utilise ce template https://templated.co/plaindisplay
J'aimerais que l'onglet actif prenne le style du premier onglet et j'ai mis ceci mais ça marche pas :
#menu li a:visited{
background: #009E2D;
color: #FFF;
}
Merci
A voir également:
- Styler l'onglet actif d'un menu
- Image styler - Télécharger - Photo & Graphisme
- Menu déroulant excel - Guide
- Rouvrir un onglet fermé - Guide
- Pourquoi je ne vois plus actif il y a ✓ - Forum Facebook Messenger
- Canon quick menu - Télécharger - Utilitaires
1 réponse
Salut,
il y a 2 problèmes déjà:
Vous ne ciblez pas le bouton du menu(ce n'est pas ça un onglet) et sur les 2 règles CSS l'une est fausse.
background est une propriété raccourcie qui regroupe plusieurs propriétés.
pour donner une couleur de fond il faut utiliser la propriété adéquate "background-color".
Il faudrait plutôt incorporer le changement de CSS dans du JavaScript lors du clic ça me semble plus réalisable comme ça.
Il y a peut-être un moyen en CSS mais je ne connais pas.
En tout cas le style du premier bouton vert est plutôt sur le li(class="current_page_item") et :visited sert pour les liens qui ont déjà était cliqué donc ça ne changera pas l'état des autres boutons mais seulement rendra vert le fond une fois qu'on aura cliqué dessus.
Au final après avoir cliqué plusieurs onglets il y aura seulement plusieurs éléments vert au lieu du premier seulement.
Pour le JavaScript:
Ici pour changer un attribut de balise:
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute
Ici pour l'indiquer lors du clic:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Bien entendu il faut effacer les classes des autres onglets(en indiquant une valeur d'attribut vide avec 2 guillemets ouvrant/fermant sans rien dedans ou un espace ) en plus d'ajouter celle de l'onglet cliqué.
ps:passez par un tuto JavaScript débutant si vous n'êtes pas au point en JS.
ps2: je ne comprends pas...utilisez vous un template déjà fait, dans ce cas pourquoi avoir à modifier un truc aussi important ça paraît contre-productif ou alors c'est vous qui le développez...
il y a 2 problèmes déjà:
Vous ne ciblez pas le bouton du menu(ce n'est pas ça un onglet) et sur les 2 règles CSS l'une est fausse.
background est une propriété raccourcie qui regroupe plusieurs propriétés.
pour donner une couleur de fond il faut utiliser la propriété adéquate "background-color".
Il faudrait plutôt incorporer le changement de CSS dans du JavaScript lors du clic ça me semble plus réalisable comme ça.
Il y a peut-être un moyen en CSS mais je ne connais pas.
En tout cas le style du premier bouton vert est plutôt sur le li(class="current_page_item") et :visited sert pour les liens qui ont déjà était cliqué donc ça ne changera pas l'état des autres boutons mais seulement rendra vert le fond une fois qu'on aura cliqué dessus.
Au final après avoir cliqué plusieurs onglets il y aura seulement plusieurs éléments vert au lieu du premier seulement.
Pour le JavaScript:
Ici pour changer un attribut de balise:
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute
Ici pour l'indiquer lors du clic:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Bien entendu il faut effacer les classes des autres onglets(en indiquant une valeur d'attribut vide avec 2 guillemets ouvrant/fermant sans rien dedans ou un espace ) en plus d'ajouter celle de l'onglet cliqué.
ps:passez par un tuto JavaScript débutant si vous n'êtes pas au point en JS.
ps2: je ne comprends pas...utilisez vous un template déjà fait, dans ce cas pourquoi avoir à modifier un truc aussi important ça paraît contre-productif ou alors c'est vous qui le développez...