Bouton pour modifier une ancre

**VinceCotta** · 22/05/2016, 18h24

N'ayant trouvé nul part mon bonheur sur le web, je me tourne vers vous et peut être avez vous la solution.
J'aimerais créer deux boutons qui incrémenterais ou décrementerais un compteur qui remplirait un href d'une ancre afin de naviguer entre ces ancres.
Bref j'aimerais tout simplement pouvoir aller à l'ancre suivante ou précedente grace à deux malheureux boutons et je sèche comme un gros noob, mon cerveau commencant à entrer en éruption.

Alors merci d'avance à mon ou mes sauveurs

**mathieu** · 22/05/2016, 21h34

montrez nous le code que vous avez déjà essayé même s'il ne fonctionne pas

**VinceCotta** · 23/05/2016, 21h23

Tout d'abord merci d'avoir répondu.
Par contre en ce qui concerne le code il n'y a plus rien j'ai tergiversé toute la journée d'hier sans que cela ne donne de résultat.
J'ai essayer avec des getElementByTagName ou encore querySelectorAll pour selectionner les <a></a> et en faire un liste et tenter de naviguer a la manièrer d'un array php mais j'avoue que j'ai bloqué et j'ai cru comprendre que ca ne marchait pas comme ca.

L'idée c'est que sur cette page par exemple. Il y'ai un bouton suivant et précedent et si c possible (si ce n'est pas le premier ou le dernier) renvoie aux chapitres suivants et précédents. Merci encore.

**NoSmoking** · 24/05/2016, 14h45

Bonjour,
il serait également intéressant que tu décrives mieux ce que tu cherches à faire.

S'agit-il d'ancres ou de liens ?
Toutes les ancres/liens sont-ils dans la même page ?
En cas de liens l'ouverture de la page se réalise où ?
...

**VinceCotta** · 24/05/2016, 23h43

Ce sont des ancres situés sur la même page dans une liste ul je voudrais juste ajouter des boutons pour les parcourir. Cette page par exemple: http://lepreparateurenpharmacie.fr/e...rma/profession

**chadoum** · 25/05/2016, 16h42

C'est possible, tu peux faire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body style="font-size:14pt">
    <div>
        NAVIGATION
        <button onclick="Back()"><</button>&nbsp;<button onclick="Next()">></button>
        CONTENU
        <div id="1" class="contenus">
            Contenu 1 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
        <div id="2" class="contenus">
            Contenu 2 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
        <div id="3" class="contenus">
            Contenu 3 :
            <br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non diam augue. Maecenas non tincidunt augue. Nulla venenatis mauris sagittis posuere malesuada. Donec ut vehicula est, sed elementum dolor. Sed dolor est, feugiat in pretium vitae, faucibus sit amet arcu. Sed vitae augue quis dolor auctor fermentum. Vestibulum in velit sed est faucibus luctus. Curabitur sodales urna eget mauris varius, id convallis ligula suscipit. Curabitur vel urna eros. Donec id tortor eu dui vehicula vulputate.
 
        </div>
    </div>
    <script>
        var index = 0
        var max = document.querySelectorAll( '.contenus' ).length
        console.log( max )
        function Back()
        {
            if ( index > 0 )
            {
                index--
                window.location = "#" + index
            }
        }
        function Next()
        {
            if ( index < max )
            {
                index++
                window.location = "#" + index
            }
        }
    </script>
</body>
 
</html>

C'est ce que tu voulais ?

Bouton pour modifier une ancre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager