使用 jQuery 突出显示目的地的滚动效果

发布于 2024-08-16 18:22:07 字数 463 浏览 8 评论 0原文

我发现了 jQuery 的锚点插件，其演示站点位于 http://www. position-relative.net/creation/anchor/。

我正在网站上开发一个常见问题解答页面，其中问题列表后面跟着答案列表。当用户单击问题时，我可以使用滚动效果向下移动到相应的答案。但我也希望以某种方式突出显示答案，以便用户可以专注于答案。

我想达到这样的效果。另外，如果您知道任何其他插件可以执行此操作，请告诉我。

原文

分享到QQ

分享到微博

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

发布评论

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

旧话新听 2024-08-23 18:22:07

当您使用锚点插件调用时：

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

您还可以绑定自己的函数来执行突出显示，如下所示：

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate().click(function() {
        $('.highlight').removeClass('highlight');
        $('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
    });
});

这要求您具有这种结构：

<a href="#foobar" class="anchorLink">Anchor link</a>

...

<a name="foobar"></a>
<div>The content you want to highlight</div>

的外观：

.highlight {
    background: #ffc;
}

在 CSS 中，您只需定义突出显示部分 jQuery 代码的工作方式是，当您单击锚链接时，它首先删除当前突出显示，然后将突出显示类应用于紧邻链接目标之后的元素。

您可以通过执行某种颜色淡入淡出动画来扩展此功能，如 SO 中所示，但这应该可以帮助您入门。

As you invoke the anchor plugin using:

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

you could also bind your own function that does the highlighting as so:

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate().click(function() {
        $('.highlight').removeClass('highlight');
        $('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
    });
});

This requires that you have this kind of structure:

<a href="#foobar" class="anchorLink">Anchor link</a>

...

<a name="foobar"></a>
<div>The content you want to highlight</div>

And in CSS, you just define how you want the highlighted part to look like:

.highlight {
    background: #ffc;
}

The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.

You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.

回复收藏 0 原文