Discussion :

[bpdelavega]

Bonjour,

je suis un Neewbie sur jQuery, j'ai trouvé un script sympa :

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
 
//INITIALISATION AU CHARGEMENT
jQuery(function(){
	jQuery("#menu_vertical a:eq("+idx+")").addClass("actif");
	jQuery(".product-view .onglet").not(":eq("+idx+")").hide();
});
 
//EVENEMENT SUR CLICK
jQuery(function(){
	jQuery("#menu_vertical a").click(function(){
	jQuery(".product-view .onglet").hide();	
	jQuery("#menu_vertical a").removeClass("actif");
	jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
	jQuery(this).blur("#menu_vertical a").addClass("actif");	
	return false;
	});
});

Mon Markup

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="menu_vertical">
	<h3>Explore your hotel</h3>
	<ul>
		<li class="first_item" id=""><a href="#onglet1" id="elem1">Overview</a></li>
		<li><a href="#onglet2" id="elem2">Room</a></li>
		<li><a href="#onglet3" id="elem3">Location</a></li>
		<li><a href="#onglet5" id="elem5">Reviews</a></li>
	</ul>
</div>

Cela fonctionne bien mais le nombre de mes <li> peut varier, et j'aimerai directement activer les éléments selon leur ID, par exemple, choisir d'activer l'élément id=elem3 au lieu d'activer en fonction d'index (le 1er, le 2nd, le 3ème, etc), malheureusement je ne connais pas la syntaxe exacte, d'avance merci pour votre aide.

[bpdelavega]

Finalement j'ai fini par trouver, pour ceux que ça intéresse :
Avec bien-sûr une méthode qui renvoie l'IDX qu'on veut.

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
 
function findIndex(){			
	idx = getParams();//Il s'agit d'une fonction me permettant de récuperer des paramètres dans une URL
	if(idx=='test1')   return 1;
	if(idx=='test2')   return 2;
	if(idx=='test3')   return 3;
	return 1;
}
 
var idx = findIndex();
 //INITIALISATION AU CHARGEMENT
jQuery(function(){
	jQuery("#menu_vertical a#elem"+idx).addClass("actif");
jQuery(".product-view .onglet").not("#onglet"+idx).hide();
});
 
//EVENEMENT SUR CLICK
jQuery(function(){
	jQuery("#menu_vertical a").click(function(){
	jQuery(".product-view .onglet").hide();	
	jQuery("#menu_vertical a").removeClass("actif");
	jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
	jQuery(this).blur("#menu_vertical a").addClass("actif");	
	return false;
	});
});