11548 sujets

JavaScript, DOM et API Web HTML5

Attribuer et supprimer un id

Bonjour !

Je ne m'y connais pas beaucoup en JS, mais en fouinant sur Alsacréations, j'ai trouvé un code très intéressant pour mon site:

  $(function(){

    var divs = $(".accordion_child");

    divs.not("#box1").hide();

    $("a").click(function(){

      divs.filter(":visible").hide();

      $($(this).attr("href")).show();

      return false;

    });

  });


Ce code permet d'afficher un div en cachant les autres, et il marche très bien pour mon site web.
Malheureusement, ma non-connaissance en JS m'empêche de le comprendre et surtout, de l'améliorer !

J'ai créé un attribut id, #header_highlight, pour mettre une image en fond sur les titres d'articles :

#header_highlight{
	background:url(images/item_bg_hover.jpg) top no-repeat;
}


Et voici mon code HTML :
<section id="accordian">
			<article>
				<header class="accordion_headings" id="header_highlight">
						<a href="#box1" class="block"> </a>
				</header>
			
				<div id="box1" class="accordion_child">
					<p>
					</p>
			
					<footer>
					</footer>
				
				</div>
			
			</article>
			<article>
				<header class="accordion_headings">
						<a href="#box2" class="block"></a>
				</header>
			
				<div id="box2" class="accordion_child">
					<p>
					</p>
			
					<footer>
					</footer>
				
				</div>
			
			</article>
                       </section>



Comment faire pour afficher ce fond uniquement sur le titre de l'article ouvert ?
Je pense qu'il faudrait supprimer l'id #header_highlight du 1er div et l'attribuer au deuxième, mais je ne sais pas comment faire.

Merci.
PS: j'espère avoir été claire Smiley smile
Modifié par damaewissub (20 Oct 2011 - 16:07)
Salut damaewissub,

Plus simplement, tu peux faire un truc de ce style dans ta fonction click : 


$(".accordion_headings").css("background-image", "none");
$(this).css("background-image", "url(images/item_bg_hover.jpg)");


où this correspond au div sur lequel tu as cliqué.
Merci d'avoir répondu Smiley biggrin

Malheureusement, ça ne marche pas Smiley decu

Dès que je clique sur un titre, il a le bon background, mais tous les autres titres disparaissent et la taille de l'image est rétrécie.

Est ce que tu pourrais me montrer exactement à quel code tu pensais stp ? C'est tout à fait possible que je me sois plantée ^^'.
damaewissub a écrit :
Malheureusement, ma non-connaissance en JS m'empêche de le comprendre et surtout, de l'améliorer !

Comme on dit: pas de bras, pas de chocolat.
Ce qui est cool, c'est que le JavaScript ça peut s'apprendre. Il y a des bons bouquins pour ça, et pas mal de ressources en ligne (assez peu pour débuter, donc un bouquin débutant en français est conseillé). La condition de personne-qui-connait-pas-encore-JavaScript est vachement plus sympa que celle de personne-sans-bras. Moi je dis ça, je dis rien.

Si tu lis l'anglais, le site de jQuery propose des tutoriels plutôt bien fichus pour apprendre à utiliser cette librairie JS. En français on doit bien trouver quelques tutoriels également.

damaewissub a écrit :
Est ce que tu pourrais me montrer exactement à quel code tu pensais stp ?

Hmm, ce serait presque contraire aux règles du forum ça en fait:
http://forum.alsacreations.com/help.php#regle8
a écrit :
Ceci est une communauté d'entraide, pas de travail à votre place
Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

On ne va pas jusqu'à interdire à quiconque de filer du code tout prêt, mais bon, c'est pas la philosophie de ce forum.

damaewissub a écrit :
Je pense qu'il faudrait supprimer l'id #header_highlight du 1er div et l'attribuer au deuxième

Plus propre et efficace: ajouter une classe "open" (ou autre nom qu'on choisira) sur un élément <article> dont le contenu est déplié, et la retirer (ou basculer sur une classe "closed") lorsqu'on masque le contenu. À partir de là, tu peux utiliser un sélecteur tel que .open .accordion_headings pour appliquer ton style.
C'est vrai que j'aurais du commencer par apprendre Smiley confused ...
Désolée.

J'ai commencé à apprendre le jquery, dès que j'aurais fini et trouvé la solution à mon problème, je reviendrais la poster ici, au cas où d'autres personnes en aurais besoin.

PS: je crois que je vais m'inspirer de ton idée de class 'open' Smiley smile
Sujet clos
Aller à