Css en fonction de l'ancre cliquée

ariza-multimedia -

Bonjour,

je viens de créer un site pour le dépannage informatique
https://ariza-multimedia.com/

sur ma page service
https://ariza-multimedia.com/services.html

j'ai créer des ancres qui vont à la page tarifs

réinstallation<a href="tarifs.html#1" rel="nofollow noopener noreferrer" target="_blank">En savoir plus</a>
nettoyage pc portable<a href="tarifs.html#2" rel="nofollow noopener noreferrer" target="_blank">En savoir plus</a>
...
sur la page tarifs
https://ariza-multimedia.com/tarifs.html
j'ai des div avec mes ancre id="1" id="2" ...
je voudrais que lorsque je clique sur #1 le div concerné sois d'une couleur différente

merci d'avance pour votre aide

Afficher la suite

1 réponse

Pitet

Salut,

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,

Css en fonction de l'ancre cliquée

1 réponse

Discussions similaires

Newsletters