Discussion :

[leroilion94]

bonjour,

je souhaite faire ce système comme cette page exemple

https://dmouronval.developpez.com/tu...s-avec-jquery/


et j'ai ajouté des sous onglets à chaque onglet

https://codepen.io/anon/pen/xMOYWW

1/ si je clique sur l'onglet 1 2 , il ne veut pas se mettre en vert (activer)

j'ai tenter plusieurs solution de changer

Code js :

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

 document.getElementById('onglets').style.display = 'block';

par

Code js :

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

 document.getElementById('onglets , sous-onglet').style.display = 'block';

ou bien j'ai essayer de tenter de changer allOnglets par allSous-Onglets etc...

mais , je n'arrives pas à faire des sous menu avec son contenu respectif

merci de votre aide pour m'aidé à mettre les sous menu

[Toufik83]

Salut,

avec un petit changement dans ton css (qui n'est pas vraiment lisible), tu peux faire ceci :

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
 
$(document).ready(function(){
 
    //Affiche le ul du premier .item rencontré.
    $("#contenu .item").eq(0).find('ul').show();
 
     //Click sur les onglets
     $('#onglets li').click(function(){
	    $(this).parent().find('li').removeClass('actif');
	    $(this).addClass('actif');
	    $("#contenu .item").hide()
	   .parent('#contenu')
	   .find('.item').eq($(this).index())
	   .show()
	   .find('ul').show();
 
    });
 
    //attache l’événement Click sur n'importe élément dont son id commence par "sous-onglets-"
    $('[id^="sous-onglets-"] li').click(function(){
	  $(this).parent().find('li').removeClass('actif');
	  $(this).addClass('actif')
	  .closest('.item')
	  .find('div').hide()
	  .parent()
	  .find('div').eq($(this).index())
	  .show();
   });
 
});

et le css

Code css :

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
 
h2 { font-weight: 700; margin: 0em; padding:0.5em; font-size: 1.5em; } 
 
#sous-onglets-1,#sous-onglets-2,#sous-onglets-3 { display: none; }  
 
#onglets li, #sous-onglets-1 li, #sous-onglets-2 li, #sous-onglets-3 li { position: relative; float: left; list-style: none; padding:0.3em; margin-right:1em; border:1px solid #000000; background-color: #EEEEEE; cursor: pointer; z-index: 1; }  
 
#onglets .actif, #sous-onglets-1 .actif, #sous-onglets-2 .actif, #sous-onglets-3 .actif { border-bottom: none; font-weight: bold; z-index: 10; background-color:#00FF00; }    
 
#contenu, #contenu-1-1, #contenu-1-2, #contenu-1-3, #contenu-2-1
	, #contenu-2-2, #contenu-2-3, #contenu-3-1
	, #contenu-3-2, #contenu-3-3 { clear: both; height:20em; 
		position: relative; z-index: 5; top:-0.1em; 
		background-color: #EEEEEE; width: 500px; overflow: hidden; 
}  
 
#contenu { border:1px solid #000000; }  
 
#contenu-1-1, #contenu-1-2, #contenu-1-3, #contenu-2-1, #contenu-2-2, #contenu-2-3, #contenu-3-1, #contenu-3-2, #contenu-3-3 { border-top:1px solid #000000; }

[leroilion94]

Merci toufik,

je pourrais supprimer et rajouté au temps d'onglet que je veux.

je vais surement encore t’embêter un peut.mais c'est le dernier truc après ça sera résolu.

comment expliqué brièvement et le plus simple.

comment on peut dire dans jquery, revenir automatiquement au 1 er sous onglet 1-1 , 2-1, 3-1 etc...

par exemple

onglet-1 > onglet 1-3 (là tu verras l'onglet 1-3 actif)

ensuite tu décide d’aller à l'onglet 2 > onglet-2-2 (là tu verras l'onglet 2-2 actif)

ensuite tu retournes dans le premier onglet

tu verras

onglet-1 >onglet 1-3 actif

moi j'aimerais qu'il revient automatiquement à l'onglet 1-1

et pareil pour les autres onglet

toujours revenir automatiquement dans l’onglet-1-1, onglet 2-1, onglet-3-1 etc.....

merci.

[Toufik83]

haaa oui , je n'ai pas remarqué ça, la fonction du click devient alors

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
 
$('#onglets li').click(function(){
	$(this).parent().find('li').removeClass('actif');
	$(this).addClass('actif');
 
        $("#contenu .item").hide()
	.parent('#contenu')
	.find('.item').eq($(this).index())
	.show()
	.find('ul')
	.show()
	.find('li')
        .removeClass('actif')//supprime la classe actif de toutes les li 
        .parent()//on revient au parent directe
	.find("li")//cible toutes les li trouvés dans le parent directe
        .eq(0).addClass("actif")//ajoute la class actif au premier li
	.closest('.item').find('div')//cibler les div dans .item
	.hide()//cacher les div cibles
        .parent().find('div').eq(0).show();//affiche le premier div		
});

Remarque :Je ne veux pas te décourager, mais ce que tu cherches à faire est faisable avec une structure html beaucoup mieux adaptée que celle-là et avec un code jQuery moins long (bricolé vite fait...) que ça, surtout sans l'utilisation des id, ni pour les onglets ni pour les sous onglets, mais seulement avec des classes.

[leroilion94]

j'ai modifier le code html en remplaçant le id par class et j'ai rajouté un sous sous menu

https://codepen.io/anon/pen/omYMRR

1. il ne revient pas automatiquement au 1 er onglets des sous menu.
2. j'ai tenter de rajouté un sous sous menu (voir l'onglet teste pour afficher un sous sous menu) quand je cliques sous sous menu 2 tout disparaît.

ensuite pour recoudre l'onglet automatique, j'ai modifier le code

https://codepen.io/anon/pen/WPoKqj

mais là lors du clique sur inscription, forum topic, (enfin pour les sous menu lors du clique ne fonctionne plus).


et ensuite j'ai ce code

https://codepen.io/anon/pen/mvOjZJ

là, apparemment tout fonctionne, mais il faut juste trouver le moyen pour lui dire de re mettre tout les 1 er onglets des sous menu et sous menu etc... automatiquement dans le 1 er onglet.


après, je ne sais pas qu'elle est la meilleurs solution

si tu me dit prends ce lien là mvOjZJ qui est bien.

dans se cas là , il faut trouver le moyen de revenir automatiquement sur les 1 er onglets des sous menu , sous-menu au temps que je rajouterais des menus.

grâce ça

Code js :

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

1
2
3
   nav('.menu', 1);
       nav('.sous-menu', 2);
       nav('.sous-sous-menu', 3);

si un jour il y a un 4 eme sous menu, je rajouterais

nav('.sous-sous-sous-menu', 4);

etc....

si ta une idée