Effet d'onglet en jquery.
Bonjour à tous, je suis en train de finir un formulaire avec une sorte d'onglet afin de découper mon formulaire en plusieurs "bouts". Je me suis inspirer de ce tuto que j'ai trouvé sur le net:
http://stilbuero.de/jquery/tabs/
http://stilbuero.de/jquery/tabs_3/nested.html
Donc voila mon problème:
J'ai un peu peur que de mettre ce système soit un mal compris pas les futurs utilisateurs, donc je souhaiterais ajouter un bouton qui me permette d'afficher l'étape suivant. Cependant je ne vois pas comment faire.
Voici mon code HTML:
Code:
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
|
<form action="inscription.html" method="post" name="form_contact" onsubmit="return verifinscription(this.form)">
<div id="inscription">
<div id="inscriptionposition">
<ul>
<li><a href="#partie-1"><span>Données sur l'entreprise</span></a></li>
<li><a href="#partie-2"><span>Information utilisateur</span></a></li>
<li><a href="#partie-3"><span>Authentification pour accéder aux sites</span></a></li>
</ul>
</div>
<div id="partie-1">
<a name="partie-1"></a>Blabla
<a name="partie-2"> Mon bouton suivant</a>
</div>
<div id="partie-2"><a name="partie-2"></a>
<a name="partie-1">Précédente</a>
<a name="partie-3"> Mon bouton suivant</a>
</div>
<div id="partie-3"><a name="partie-3"></a>
<a name="partie-2"> Précédent</a>
<p align="center">
Voulez-vous recevoir notre newsletter ?
<input type="radio" name="newsletter_pro" value="oui" id="oui" /><b style="color:#d43e84;">OUI</b>
<input type="radio" name="newsletter_pro" value="non" id="non" />
NON
</p>
<center><input type="submit" style="background-color: #f9f9f9; color:#b4a9ab; padding-top:-1px; border:0; height:21px;" name="inscription" value="S'enregistrer" class="bouton"/></center>
</div>
</a>
</form> |
En gros, je veux que l'utilisateur qui clique sur le premier bouton suivant accède au contenu du second onglet.
Pouvez vous m'aidé svp?
Merci d'avance.
et mon code JS:
Code:
1 2 3 4
| $(document).ready(function(){
$("#inscription > #inscriptionposition > ul").tabs();
}); |