Discussion :

[Lionel_aw]

Bonjour,
je démarre avec Jquery et j'essaie de gérer un menu horizontal avec changement de coleur de fond au survol et changement de couleur de fond pour le lien cliqué (cela revient à simuler des onglets).
Mon code ci dessous marche parfaitement avec IE6, 7 et 8 mais pas avec Firefox.
Avec ce dernier, le survol ne marche pas, pire que ça, sur les liens qui ont déjà été cliqué, j'ai un survol mais avec une couleur différente.
j'initialise le survol au début (ready(function()...
et aussi après l'évènement click.

Qulqu'un peut m'aider?

merci

Lionel

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
// JavaScript Document
$(document).ready(function() 	// le document est chargé
	{
	// initialise tous les liens avec fond #ccc et rollOver sauf le 1er
	couleurSurvol = "0a95ff";
	$("#menuPhoto li a").not("li#photo1 a").each(function(){
	$(this).hover( 
		function(){  $(this).css('background-color', couleurSurvol) },
		function(){  $(this).css('background-color', '#ddd') }
		);
	});
 
// fonction click  //////////////////////////////////////////
$("#menuPhoto a").click(function(){ 	// on selectionne tous les liens du menu et on définit une action quand on clique dessus
 
	attribLi=$(this).parent().attr("id");
	attribLi = "li#"+attribLi+" a"; // défini sélecteur css en cours
 
// initialise tous les liens avec fond #ccc et rollOver
$("#menuPhoto li a").each(function()
	{
	$(this).css({ color: "#472323", "background-color": "#ddd", "font-weight": "normal", cursor: "pointer" });
	$(this).hover( 
		function(){  $(this).css('background-color', couleurSurvol) },
		function(){  $(this).css('background-color', '#ddd') }
		);
	}
);	
 
// neutralise survol pour lien en cours
$(attribLi).css({ color: "#fff", "background-color": "#054374", "font-weight": "bold", cursor: "default" });	$(attribLi).hover( 
	function(){  $(this).css('background-color', '#054374')},
	function(){  $(this).css('background-color', '#054374')}
	);
 
	//alert(attribLi);
 
	page=($(this).attr("href")); // on recupere l' adresse du lien
 
	$.ajax({  // ajax
		url: page, // url de la page � charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
		afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});
 
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#insidePhoto").empty(); // on vide le div
	$("#insidePhoto").append(donnees); // on met dans le div le résultat de la requete ajax
	$("#isolate").hide();		// cache le lien 'home' pour page isolée
}

[Lionel_aw]

Je suis un âne !!!!

dans ma ligne couleurSurvol = "0a95ff";

j'avais oublié le #

mais c'est bizarre quand même que ça marche dans IE ... non?