Défiler des div avec boutons
Résolu
octani
Messages postés
22
Date d'inscription
Statut
Membre
Dernière intervention
-
Opium59000 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
Opium59000 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Défiler des div avec boutons
- Comment réinitialiser un téléphone avec les boutons - Guide
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Div c++ - Télécharger - Langages
- Comment déverrouiller un samsung avec les boutons - Guide
8 réponses
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';
Ils devraient être de la forme:
document.getElementById('question1').style.display = 'none';
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
http://flowplayer.org/tools/scrollable/index.html
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ;)
Si tu ne veux vraiment pas utiliser JQuery Tools tu peux me montrer ton code si tu veux que j'y jette un oeil ;)
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 !
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 !
