5568 sujets

Sémantique web et HTML

Ancre sur une autre page à onglets

Bonjour,

Je mets en place un système d'ancre pour mon site. J'ai des mots sur la page d'accueil et quand je clique dessus je voudrais atteindre une autre page.

L'autre page contient un système d'onglet. Je voudrais donc quand je clique sur un mot de la page d'accueil atteindre par exemple l'autre page avec l'onglet 3 ouvert.

Est-ce possible selon vous ? J'ai essayé pas mal de truc sans succès. Ma page est correctement ouverte mais l’onglet n'est pas sélectionné par l'ancre.

Je vous remercie.
Bonjour,

Sans passer par un travail côté serveur, je ne vois que des hacks.
Tu peux faire passer le numéro de l'onglet quelque part (arguments url, cookie, ...) puis le récupérer en javascript afin d'ouvrir le bon onglet au chargement de la page.
Je viens de faire un essai, dis-moi si cela te convient Smiley cligne

Fichier "index.html"
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Accueil</title>
</head>
<body>

<a href="onglets.html?num=1">Premier onglet</a>
<a href="onglets.html?num=2">Deuxième onglet</a>
<a href="onglets.html?num=3">Troisieme onglet</a>

</body>
</html>


Fichier "onglets.html"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onglets</title>
    <style>
        .selected {
            color: red;
        }
    </style>
</head>
<body>

<h3 id="onglet-1">Premier</h3>
<h3 id="onglet-2">Deuxième</h3>
<h3 id="onglet-3">Troisième</h3>

<script type="text/javascript">
    var urlParams = {};
    location.search.replace(
        new RegExp("([^?=&]+)(=([^&]*))?", "g"),
        function ($0, $1, $2, $3) {
            urlParams[$1] = $3;
        }
    );

    var onglet;
    if (urlParams.hasOwnProperty('num')) {
        onglet = document.getElementById('onglet-' + urlParams.num);
    } else {
        onglet = document.getElementById('onglet-1');
    }
    onglet.classList.add('selected');
</script>

</body>
</html>
salut,
je ne pense pas que ça soit utile de faire si compliqué.
L'avantage (ou pas) avec les ancres c'est qu'elles sont gérées automatiquement par le navigateur. En temps normal, tu n'as besoin de rien pour que le navigateur se place correctement sur le contenu souhaité (tu peux voir par toi-même).

Tu peux par ailleurs gérer très simplement en JS la navigation sans que ça soit un "hack". En voici un exemple.

Tu peux même le faire en pure CSS.
Salut,

J'avoue ne pas être assez bon en CSS pour cacher et ouvrir des onglets directement à partir de ce système.

Dans tous les cas, je ne pensais que ça ne marchait que lorsqu'il s'agit de la page courante, or là, il veut aller vers une autre page pour y découvrir le bon onglet.
Avec tes exemples je n'arrive pas à reproduire le comportement avec plusieurs pages, tu pourrais m'indiquer comment faire s'il-te-plaît ? =)

Merci
Sujet clos
Aller à