Styler l'onglet actif d'un menuFermé

Question

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 :

#menu li a:visited{
		background: #009E2D;
		color: #FFF;
	}


Merci

Totogros · Answer

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...

Styler l'onglet actif d'un menu

1 réponse

Discussions similaires

Newsletters