Défiler des div avec boutons

[Résolu/Fermé]
Signaler
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
-
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
-
Bonjour,
J'ai 5 div : div1 , div2 , div3 , div4 , div5 cachés sur une même page html et j'aimerais savoir si il est possible de faire afficher div1 lors d'un clic sur un input button suivant et cacher les autres et après afficher div2 et cacher les autres , et ainsi de suite .
Merci bien par avance des vos réponses.

8 réponses

Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
Alors ça fait longtemps que je n'utilise plus le javascript de cette manière (j'utilise JQuery), mais de souvenir il me semble que dans ton cas tes sélecteurs ne sont pas bons.

Ils devraient être de la forme:

document.getElementById('question1').style.display = 'none';
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
Une solution assez simple est d'utiliser le JQuery avec l'outil JQueryTools. Tu trouveras comment faire très facilement sur le site officiel.

http://flowplayer.org/tools/scrollable/index.html
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013

Merci bien Opium59000 pour le lien , c'est gentil . J'essayerai cet outil .
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013

Enfin c'est un slideshow jquery , mais même si il est manuel il est en rotation des images sans cession avec un delai .
Ce que je veux c'est creer un diaporama de textes non d'images et avec un bouton next .
J'ai essayé avec javascript à l'aide de style.display='none' ou 'block', mais c'est très dur pour moi en manipulant plus de 3 div contenant des textes . (pour deux div c'est facile).
Merci.
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
Il y a une option à mettre à "false" pour supprimer le défilement automatique. De plus tu mets ce que tu veux dans tes div (uniquement du texte dans ton cas).

Si tu ne veux vraiment pas utiliser JQuery Tools tu peux me montrer ton code si tu veux que j'y jette un oeil ;)
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013

Merci,
mes connaissances très bornées me laisse essayer ce code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>titre</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<script type="text/javascript">
<!-- etant donner question1 affichée star2() la cache et affiche question2 -->
function star2()
{
document.form.question1.style.display = 'none';
document.form.question2.style.display = 'block';
document.form.button2.style.display = 'none';
document.form.button3.style.display = 'block';
}
<!-- etant donner question2 affichée star3() la cache et affiche question3 -->
function star3()
{
document.form.question2.style.display = 'none';
document.form.question3.style.display = 'block';
document.form.button3.style.display = 'none';
document.form.button4.style.display = 'block';
}
</script>
</head>
<body>
<form id="form">
<!-- ici 4 questions toutes cachées sauf la première -->
<div id="question1" class="slide" style="display:block;">question1</div>
<div id="question2" class="slide" style="display:none;">question2</div>
<div id="question3" class="slide" style="display:none;">question3</div>
<div id="question4" class="slide" style="display:none;">question4</div>
<!-- ici 3 boutons tous cachés sauf le premier -->
<input type="button" id="button2" value="question2" style="display:block;" onClick="star2();">
<input type="button" id="button3" value="question3" style="display:none;" onClick="star3();">
<input type="button" id="button4" value="question4" style="display:none;" onClick="star4();">
</form>
</body>
</html>

qui ne marche plus !
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013

Mes remerciements à vous pour la grande aide ; ca marche très bien .
J'essayerai de développer ce code pour créer un qcm .
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
Pas de problème ;)
Bon courage pour la suite