27825 sujets

CSS et mise en forme, CSS3

Modérateur
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)