Styler l'onglet actif d'un menu

Bonjour
J'utilise ce template https://templated.co/items/demos/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
Modifié par gcyrillus (08 Aug 2020 - 22:06)

bonjour, ce template utilise la class current_page_item pour appliquer ce style justement pour la page en cours. Attribuer cette class n'est pas le job de CSS mais éventuellement de JavaScript ou ton langage coté serveur/hébergement . ( ...trés souvent PhP ).

:visited, ne s'applique qu'au lien effectivement déjà ouvert par le navigateur. Les options de style sont trés limitées : https://developer.mozilla.org/fr/docs/Web/CSS/:visited

<edit> j'ai mis le lien à jour directement sur le template , bien que le fond de la question ne dépende pas d'un template(ou lien promotionnel)</edit>
Modifié par gcyrillus (08 Aug 2020 - 22:11)

Bonsoir. Normal, l'état n'est pas sauvegardé sur la nouvelle page. Il faut soit passer par javascript et sauvegarder l'état de l'onglet actif via un cookies ou localStorage, soit sauvegarder l'état côté serveur.

Pour ce faire vous mettez une classe sur l'onglet actif.

Édit : grillé !
___
PS : ce post est vieux et j'ai dis des conneries car il n'y a pas besoin de sauvegarder en localStorage. Toujours en JS, si l'on veut rester côté front, il faut faire une comparaison du lien proposé par l'onglet avec le permalien de la page en cours, le cas échéant une classe `current` sera ajouté sur le li parent :

<ul class="nav">
  <li><a href="/link1.html">Another page</a></li>
  <li><a href="/myCurrentPage.html">Current page</a></li>
  <li><a href="/link3.html">Another page</a></li>
  <li><a href="/link4.html">Another page</a></li>
</ul>

const currentTabNavigation = (() => {
  document.querySelectorAll('.nav a').forEach(el => {
    if (location.pathname === el.pathname) el.parentElement.classList.add('current')
  })
})()

Démonstration sur CodePen

Pour la postérité...
Modifié par Olivier C (26 May 2022 - 23:50)