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)

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)