突出显示下一个
;单击锚点后的标签

发布于 2024-09-16 06:37:20 字数 1109 浏览 4 评论 0原文

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

我想修改它以突出显示定义列表中的下一个

标记：

<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

    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 修改起作用。

原文

I'm using some code I found to highlight an id after clicking an anchor link.

I'd like to modify this to instead highlight the next <dd> tag in a definition list:

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

Here is the jquery from 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);
});

I can't seem to get the usual .next or .sibling modifications to work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷荒 2024-09-23 06:37:20

我会使用 n下一个相邻同级选择器：

highlight(elemId + ' + dd');

I'd use the next adjacent sibling selector:

highlight(elemId + ' + dd');

回复收藏 0 原文

一枫情书 2024-09-23 06:37:20

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

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

它应该针对 p 是 dd 的直接后代，而 dd 是 target-ed dt 元素的直接同级元素。

不过，这种方法有一些注意事项：我无法想象 IE < 8（可能包括8）将正确实施它。而且几乎肯定需要有效的文档类型。

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

I'm not entirely sure what you're trying to achieve, but assuming that you're clicking a link on the same page, and then trying to highlight the targeted element you could use a pure css solution:

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

It should target the p that is a direct descendant of the dd which is the immediate sibling of a target-ed dt element.

There are some caveats to this approach, though; I cant' imagine that IE < 8 (and possibly including 8) will implement it properly. And it would almost certainly require a valid doctype.

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

回复收藏 0 原文

~没有更多了~