11548 sujets

JavaScript, DOM et API Web HTML5

Propriété Background avec la méthode CSS de Jquery

Bonjour à tous,

J'ai un menu composé d'une balise <div> ayant pour id "navigation" et contenant une liste d'éléments ayant chacun un id du type "menu-x". Voici le code HTML :


                <div id="navigation">      
                    <nav id="menu" role="navigation">
                        <ul>
                            <li id="menu-1" class="active"><a href="#">RUBRIQUE 1</a></li>
                            <li id="menu-2"><a href="#">RUBRIQUE 2</a></li>
                            <li id="menu-3"><a href="#">RUBRIQUE 3</a></li>
                            <li id="menu-4"><a href="#">RUBRIQUE 4</a></li>                                                                                    
                        </ul>
                    </nav>


Je souhaite affecter un style à la propriété "background" de ma div "#navigation" spécifique selon l'élément du menu qui possède la classe "active". Voici mon code Jquery :


		$(document).ready(function(){ 

			if ($("#menu-1").hasClass("active")) {
			$("#navigation").css('background','url(../images/menu_1.jpg) 16px 46px no-repeat');
			}

		});


Le script trouve bien la classe active sur l'élément "#menu-1" mais il n'affiche pas le background.

J'ai bien vérifié le chemin et la syntaxe, je ne vois pas ce qui cloche dans mon code Smiley ohwell

Avez-vous une idée ?
Bonjour,

Ca devrait fonctionner, tu peux essayer ceci pour la valeur du background :
url("../images/menu_1.jpg") no-repeat scroll 16px 46px transparent

J'utilise ça dans un code et ça fonctionne bien.
Bonjour,

Merci pour ta réponse, j'ai essayé avec ton code mais ça ne fonctionne toujours pas.

J'ai également essayé de réutiliser les mêmes guillemets mais toujours rien :


  $(document).ready(function(){   
  
            if ($("#menu-1").hasClass("active")) {  
            $("#navigation").css("background","url("../images/menu_1.jpg") no-repeat scroll 16px 46px transparent");  
            }  
  
        });
Si tu essayes simplement de mettre un background-color à red pour voir si ça passe bien ?

Si ça passe, essaye de décomposer l'ajout du background en background-image, background-position etc
Bonjour,

Merci pour ton aide, j'ai enfin trouvé ce qui clochait ... En fait, vu que mon script se trouve au niveau de ma page html et pas au niveau de ma feuille de style, le chemin vers mon image était erroné (j'ai bêtement mis celui de la feuille de style) Smiley confused

ça fonctionne donc avec le code suivant :


$(document).ready(function(){  
 
            if ($("#menu-1").hasClass("active")) { 
            $("#navigation").css('background','url(images/menu_1.jpg) 16px 46px no-repeat'); 
            } 
 
        });
Sujet clos
Aller à