Css en fonction de l'ancre cliquée
Fermé
ariza-multimedia
-
4 avril 2017 à 19:57
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 5 avril 2017 à 11:15
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 5 avril 2017 à 11:15
A voir également:
- Css en fonction de l'ancre cliquée
- Fonction si et - Guide
- Fonction somme excel - Guide
- Fonction moyenne excel - Guide
- Durée de fonctionnement processeur ✓ - Forum Windows 10
- Cette fonction n'est pas disponible actuellement tv lg - Forum Téléviseurs
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
5 avril 2017 à 11:15
5 avril 2017 à 11:15
Salut,
Il ne semble pas possible de réaliser ceci uniquement en css, il faut utiliser un peu de javascript.
Un petit exemple :
Par rapport à cet exemple, plutôt que de modifier le style directement en js, il serait mieux d'utiliser js uniquement pour ajouter/supprimer une classe sur les titres actifs puis de gérer le style via cette classe css.
Bonne journée,
Il ne semble pas possible de réaliser ceci uniquement en css, il faut utiliser un peu de javascript.
Un petit exemple :
<a href="#1" rel="nofollow noopener noreferrer" target="_blank" class="ancre">1</a> <a href="#2" rel="nofollow noopener noreferrer" target="_blank" class="ancre">2</a> <div id="1" class="titre-ancre">1</div> <div id="2" class="titre-ancre">2</div>
<script>
var colorDefault = '#000';
var colorActive = '#888';
// on récupère les balises class="ancre"
var links = document.querySelectorAll('.ancre');
for (var i = 0; i < links.length; i++) {
// pour chaque balises class="ancre" on associe une la fonction suivante
links[i].addEventListener('click', function() {
// on réinitialise la couleur de tous les titres
var titles = document.querySelectorAll('.ancre');
for (var j = 0; j < titles.length; j++) {
document.getElementById(new URL(titles[j].href).hash.replace('#', '')).style.color = colorDefault;
}
// on change la couleur du titre correspondant à l'ancre cliquée
var hash = window.location.hash;
document.getElementById(hash.replace('#', '')).style.color = colorActive;
});
}
</script>
Par rapport à cet exemple, plutôt que de modifier le style directement en js, il serait mieux d'utiliser js uniquement pour ajouter/supprimer une classe sur les titres actifs puis de gérer le style via cette classe css.
Bonne journée,
