différences entre IE et Firefox.
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:
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
} |