Discussion :

[dedel53]

Bonjour

je cherche désespérément à faire un système d'onglets en jquery. Le contenu du premier onglet est par défaut déplié et deux autres cachés. Le contenu des autres s'affiche que lorsque je clique dessus.

voici un exemple de ceux que je souhaite faire:

http://jqueryui.com/demos/tabs/#default

voici mon code html

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
56
57
58
59
60
61
62
63
64
65
66
67
 
<div id="tabs" class="texte_module_economie fond_module_economie">
                            <ul>
                                <li class="etat_bouton_actif"><h3><a href="#tabs-1">26 400 entreprises</a></h3></li>
                                <li class="etat_bouton_defaut"><h3><a href="#tabs-2">Economie</a></h3></li>
                                <li class="etat_bouton_defaut"><h3><a href="#tabs-3" id="position_puce">Palmarès d'entreprises</a></h3></li>
                            </ul>
                            <div id="cadre_contenu_module_economie">
 
 
	<script type="text/javascript">
	$(document).ready(  function() {
		$("#tabs").tabs();
		return false;
	});
	</script>
 
                                <div id="tabs-1">
                                	<div id="bloc1_entreprises">
                                    	<h3>Je recherche une entreprise</h3>
                                        <div id="contenu_bloc1">
                                            <p id="titre_orange_bloc">Service gratuit</p>
                                            <form id="form2" name="form2" method="post" action="">
                                            	<fieldset>
                                                    <input name="champ_raison_sociale" type="text" id="champ_raison_sociale" class="fond_input taille_texte_input_eco" value="Raison sociale" />
                                                    <input type="submit" name="bouton_ok" class="fond_bouton_ok position_bouton_ok" value="" />
                                                </fieldset>
											</form>
 
                                            <form id="form3" name="form3" method="post" action="">
                                            	<fieldset>
                                                    <input name="champ_dirigeant" type="text" id="champ_dirigeant" class="fond_input taille_texte_input_eco" value="Nom du dirigeant" />
                                                    <input type="submit" name="bouton_ok" class="fond_bouton_ok position_bouton_ok" value="" />
                                                </fieldset>
											</form>
 
                                            <a href="#" class="liens_bloc_entreprise" id="position_lien_recherche">Recherche avancée</a>
                                            <a href="#" class="liens_bloc_entreprise" id="position_lien_commandez">Commandez vos fichiers</a>
                                        </div>
                                    </div>
                                    <div id="bloc2_entreprises">
                                    	<h3>Je rejoins le réseau Ecobiz</h3>
                                    	<div id="image_ecobiz">
                                        <img src="images/image_bloc_ecobiz.jpg" alt="" />
                                        </div>
                                        <div id="contenu_liste_ecobiz">
                                        	<ul>
                                            	<li>2 300 entreprises</li>
                                                <li>28 communautés</li>
                                                <li>100 experts</li>
                                                <li>200 rencontres et ateliers</li>
                                            </ul>
                                        </div>
                                        <a href="#" class="puce_detail">En savoir plus</a>
                                    </div>
                                </div>
 
                                <div id="tabs-2">
                                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
                                </div>
                                <div id="tabs-3">
                                <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                                <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
                                </div>
                             </div>
                        </div>
                    </div>

merci pour votre aide

[danielhagnoul]

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
 
    <link rel="stylesheet" type="text/css" href="../styles/humanity/jquery-ui-1.7.custom.css" />
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript" src="../scripts/jquery-ui-1.7.custom.min.js"></script>    
    <script type="text/javascript">
        $(document).ready(function() {    
            $("#tabs").tabs();
        });
    </script>

L'appel aux scripts et au style doit se trouver dans la <head></head>

[kaen25]

L'appel aux scripts et au style doit se trouver dans la <head></head>

Non c'est faux, tu peux tres bien avoir un script juste avant la fermeture de body.

Et d'ailleur selon les directives yahoo il est preferable de mettre tous les script js en bas de page car le chargement d'un JS bloque le navigateur.

De plus le $(document).ready() est fait pour éviter que le script se lance avant que le l'arbre DOM soit chargé.

Par contre mettre le script au milieu des div qu'il doit traiter n'est pas tout propre.

Pour en revenir au probleme, et apres avoir regarder l'exemple fournis par jquery UI, je dirais qu'il y a un div en trop.

<div id="cadre_contenu_module_economie">.....</div>

Les UL / LI est direct suivit du système de contenu "tab-X" hors il y a dans ton cas un div qui a mon avis interfère peut être.