jQuery: Comment ne pas cacher une section avec l'ancre dans l'URL

Question

Sur ma page la plupart des p-sections sous un en-tête h3 sont masquées. Si vous cliquez dessus, le contenu ci-dessous est affiché. Seule la première section est affichée lorsque la page est ouverte. J'utilise jQuery pour cacher ces sections comme:

jQuery("#area h3:first").addClass("active"); 
jQuery("#area p:not(:first)").hide(); 

Mais que, s'il y a un point d'ancrage dans l'un de l'autre section et l'utilisateur est un lien vers elle avec un # à la fin de l'URL? En ce moment, il saute à la section cachée, ce qui est irritant, parce que le texte n'est pas affiché. Je ne voudrais pas cacher la section quand une ancre dans l'url est dans cette section par exemple. http://domain.com/page.php#anchor_in_section_3.

Comment empêcher la section de se cacher/s'effondrer?

Détail: Après la réponse 1, j'ai trouvé deux problèmes: Si vous utilisez .hide et que vous ne voyez qu'une ligne de code plus tard, les sections restent cachées. Cela semble rapide pour jQuery. L'autre problème est que, avec la solution décrite dans la réponse 1, jQuery ne trouve l'ancre que si elle n'est pas dans une balise enfant.

Il est plus difficile que je pensais :)

Ainsi, la solution décrite dans les mots est que toutes les sections, à l'exception du premier et celui qui contient la balise d'ancrage doivent être cachés. L'ancre peut être dans n'importe quel (enfant) -tag de la section.

Essayé 2 heures pour transférer ceci dans jQuery mais sans succès avec ma pauvre connaissance de jQuery.

Answer 1

Pour obtenir le nom de l'ancre de l'URL, utilisez la ligne suivante:

var anchorName = document.location.hash.substring(1) 

qui récupère la partie de hachage de l'URL, puis découper le premier caractère hors (le premier caractère sera toujours la symbole de hachage, "#"). Voici quelques documents à ce sujet: Javascript Tutorial, Location.hash. Une fois que vous avez, faire quelque chose comme ce qui suit:

jQuery("#area p:has(a[name=" + anchorName + "])").show(); 

Cela montrera tout paragraphe #area qui contient un point d'ancrage avec le nom spécifié dans la partie de hachage de l'URL.

EDIT

Pour résoudre le problème de jQuery étant de jeûner, vous pouvez utiliser une sélection colombophile seulement cacher ceux qui finiront caché, comme ceci:

$("#area > p:not(:first)").filter("p:not(:has(a[name=" + anchorName + "]))").hide(); 

Cela dit pour prendre tous les paragraphes sauf le premier, puis prenez le sous-ensemble de ceux qui ne contiennent pas d'ancre avec une valeur donnée pour l'attribut name, et masquer tout ce qui reste. Le premier paragraphe, et tous ceux qui contiennent une ancre avec le nom de l'attribut resteront visibles.

Voici une démonstration en direct: http://jsfiddle.net/JDQxP/

Parce que nous ne pouvons pas obtenir le hachage de l'URL sur jsFiddle, je l'ai remplacé cette ligne avec des valeurs statiques. Décommentez-les un à la fois pour voir l'effet de chacun. Notez que l'ancre "phasellus" est dans un span wrapper, mais le sélecteur fonctionne toujours correctement.