Discussion :

[Invité]

Bonjour!

j'ai un petit menu jquery afit avec des UL IL!

J'ai créé un script pour gérer les liens de page html ou de contenu dans une seul DIV. Il semble bien fonctionner...

Peut-on améliorer ou ai-je fais des erreurs sur le code JS?
Merci d'avance de vos remarques...

Voici le code HTML :

Code html :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 <!-- DEBUT Menu  ... -->
<div id="CadreMenu"><!-- DEBUT Cadre Menu  ... -->
	<div id="main"><!-- DEBUT Menu Type Accordeon ... -->
		<ul class="container"><!-- DEBUT Container Menu ... -->
			<li class="menu" id="menu1">
          			<ul>
		    			<li class="button"><a href="#Titre1" class="green">Titre 1 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a  href="#contenu1">Contenu1</a></li>
                    					<li><a  href="#contenu2">Contenu2</a></li>
                    					<li><a  href="#contenu3">Contenu3</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu2">
          			<ul>
		    			<li class="button"><a href="#Titre2" class="blue">Titre 2 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1a">Open Grapes Section</a></li>
                    					<li><a href="#contenu2a">Close This Section</a></li>
                    					<li><a href="#contenu3a">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu3">
          			<ul>
		    			<li class="button"><a href="#Titre3" class="orange">Titre 3 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1b">Open Grapes Section</a></li>
                    					<li><a href="#contenu2b">Close This Section</a></li>
                    					<li><a href="#contenu3b">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
			<li class="menu" id="menu4">
          			<ul>
		    			<li class="button"><a href="#Titre4" class="red">Titre 4 <span></span></a></li>
            				<li class="dropdown">
                				<ul>
                    					<li><a href="#contenu1c">Open Grapes Section</a></li>
                    					<li><a href="#contenu2c">Close This Section</a></li>
                    					<li><a href="#contenu3c">Read on Wikipedia</a></li>
                				</ul>
					</li>
          			</ul>
      			</li>
      	  	</ul><!-- FIN Container Menu ... -->
<!-- DEBUT  ... -->
		<div class="cc_content">	
			<div>
				<div id="contenu1">
					<p>	- contenu1 <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu2">
					<p>	- contenu2 <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu3">
					<p>	- contenu3 <br /></p>
					<iframe name="FRAM1" Height="100%" width="100%" Align="left" Align="top" ALLOWTRANSPARENCY="true" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" scrolling="no" src='contenu/test2.html'></iframe>
					<br /><br /><br />
				</div>
				<div id="contenu1a">
					<p>	- contenu1a <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu2a">
					<p>	- contenu2a <br /></p>
					<br /><br /><br />
				</div>
				<div id="contenu3a">
					<p>	- contenu3a <br /></p>
					<iframe name="FRAM1" Height="100%" width="100%" Align="left" Align="top" ALLOWTRANSPARENCY="true" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" scrolling="no" src='contenu/test2.html'></iframe>
					<br /><br /><br />
				</div>
			</div>
		</div>
<!-- FIN ... -->

Voici le code du fichier JS gérant les liens de contenu ou futur URL

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
$(document).ready(function(){
	$('.menu >ul ul li').each(function(){         // Sélection de toutes les div contenuent dans le menu
		var current = null;                            // Mise à Zero la variable current
 
		current = $(this).find('a:first').attr('href');   // Récupération de l'ID current du 1er HREF --> #contenu1
		// alert("Identification du Sous_menu : " +  '\n' + current);
 
		$(this).find('a[href=" '+current+' "]').addClass('active');  // Récupère le lien du ID current
 
		$(current).siblings().hide();                                       // Récupère les ID de même niveau que ID current; puis les caches
 
		$(this).find('a').click(function(){                   // Ecoute des cliques sur les éléments ID
			var link = $(this).attr('href');                    // création de la variable contenant le HREF de ID current
			// alert("Identification du link actif"  +  '\n' + link);
 
			$(link).siblings().hide();                          // Cache le contenu précédent
			$(link).show();												// affiche le contenu current
		});
	});
 
});

Y a t-il une solution plus propre ?

merci d'avance de vos remarque ou autres solutions.

bye