Navigation par onglet (sous menu )

Version imprimable

28/01/2019, 23h37
leroilion94

Navigation par onglet (sous menu )

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:

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

par

Code:

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

Salut,

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

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
 
$(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:

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; }

29/01/2019, 18h29
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.

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

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.

30/01/2019, 16h52
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:

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