en surbrillance next <dd> tag après avoir cliqué sur une ancre

Question

J'utilise du code que j'ai trouvé pour mettre en évidence un identifiant après avoir cliqué sur un lien d'ancrage.

Je voudrais modifier cette place à mettre en évidence la balise suivante <dd> dans une liste de définitions:

<dl class="mainfaq"> 
     <dt id="q1">Q1</dt> 
     <dd><p>A1</p></dd> 
     <dt id="q2">Q2</dt> 
     <dd><p>A2</p></dd> 
     <dt id="q3">Q3</dt> 
     <dd><p>A3</p></dd> 
</dl> 

Voici le jquery de Lincoln Loop

function highlight(elemId){ 
    var elem = $(elemId); 
    elem.css("backgroundColor", "#ffffff"); // hack for Safari 
    elem.animate({ backgroundColor: '#ffffaa' }, 1500); 
    setTimeout(function(){$(elemId).animate({ backgroundColor: "#ffffff" }, 3000)},1000); 
} 

if (document.location.hash) { 
    highlight(document.location.hash); 
} 
$('a[href*=#]').click(function(){ 
    var elemId = '#' + $(this).attr('href').split('#')[1]; 
    highlight(elemId); 
}); 

Je ne peux pas sembler obtenir les modifications habituelles .next ou .sibling au travail.

Answer 1

J'utilise le n ext adjacent sibling selector:

highlight(elemId + ' + dd'); 

Answer 2

Je ne suis pas tout à fait sûr de ce que vous essayez d'atteindre, mais en supposant que vous cliquez sur un lien sur la même page, puis essayer pour mettre en évidence l'élément ciblé, vous pouvez utiliser une solution pure css:

:target + dd > p { /* css */ } 

Il faut cibler le p qui est un descendant direct du dd qui est le frère immédiat d'un target -El dt élément.

Il y a cependant quelques réserves à cette approche; Je ne peux pas imaginer que IE < 8 (et éventuellement y compris 8) l'implémentera correctement. Et il faudrait presque certainement un doctype valide.

Demo à jsbin: http://jsbin.com/oqamu4