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