28111 sujets

CSS et mise en forme, CSS3

Mise en forme texte après avoir suivi un ancre

Bonjour tout le monde,

J'ai une petite question concernant les possiblités de CSS et HTML Smiley smile

Est ce possible de mettre en surbrillance une ligne sur laquelle on aurait mit un ancre interne ?

Je m'explique :
Mon_Lien_avec_ancre => Je clique dessus cela m’envoie vers ma balise <Mon_Lien_avec_ancre> située plus bas dans ma page. Je souhaiterais mettre le texte de cette partie en surligner ou qui change de couleur au moment du clic sur mon ancre de départ, afin de mettre en avant cette partie du texte précise.

Je sais qu'il est possible de modifier des liens en passant la souris dessus (style le grandir ou changer la couleur) mais de là à modifier une partie autre du texte, je ne sais pas.

EDIT : comme sur Wikipédia, quand on clique sur les exposants pour avoir les notes en bas de page en fait; quand on clique sur un numéro, on est transféré sur la note et celle ci est surligné en bleu Smiley biggrin

Merci d'avance et bonne journée. Smiley biggrin
Modifié par PtitNoxy (10 Sep 2021 - 16:01)
Je ferais un truc de ce style en javascript :
<a href="#ancre"  onclick="[cibler l'élément en JS].style.background-color='GreenYellow'">clic me</a>
Modérateur
et l'eau, 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .current{
            color:orangered;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#_1">paragraphe_1</a>
        <a href="#_2">paragraphe_2</a>
        <a href="#_3">paragraphe_3</a>
    </nav>
    <p id="_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum saepe ut accusantium explicabo qui doloremque dolor doloribus, adipisci recusandae maxime accusamus quam esse dicta quas, ducimus expedita voluptatem voluptas.</p>
    <p id="_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum adipisci voluptatem, quam delectus blanditiis praesentium? Veniam impedit eum vel voluptatem, natus repellat numquam? Odit nostrum, neque corporis, labore optio et?</p>
    <p id="_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus distinctio eius esse nemo repellendus pariatur, obcaecati illum rerum, ducimus dolorem consequuntur officia error culpa repellat numquam tempore laudantium harum aliquid?</p>

    <script>
        window.addEventListener("DOMContentLoaded", ()=>{
            window.addEventListener('hashchange', e =>{
                if(document.querySelector(window.location.hash)){
                    document.querySelectorAll('p[id^="_"]').forEach($p =>{
                        if($p === document.querySelector(window.location.hash)){
                            $p.classList.add('current');
                        }else{
                            $p.classList.remove('current');
                        }
                    });
                }
            })
        })
    </script>
</body>
</html>

Modifié par niuxe (10 Sep 2021 - 17:42)
Sujet clos
Aller à