Question

我正在使用我发现的一些代码，在点击锚链接后突出显示id。

我想将其修改为突出显示定义列表中的下一个<dd>标记：

<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>

以下是来自Lincoln Loop

的jquery

    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);
});

我似乎无法通常的.next或.sibling修改工作。

Answer 1

我会使用n ext adjacent sibling selector：

highlight(elemId + ' + dd');

Answer 2

我不完全确定您要实现的目标，但假设您单击同一页面上的链接，然后尝试突出显示目标元素，您可以使用纯css解决方案：

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

它应该定位p，dd是target的直接后代，dt是{{1}} - ed {{1}}元素的直接兄弟。

但这种方法有一些警告;我不能想象IE＆lt; 8（可能包括8）将正确实现它。它几乎肯定需要一个有效的doctype。

jsbin演示： http://jsbin.com/oqamu4

单击锚点</dd>后突出显示下一个<dd>标记

2 个答案: