1

当点击当前页面的按钮时，如何在其他HTML页面中锚定段落并同时高亮指向段落所在的区域？

我用 JavaScript 编写了这个简单的代码，只是做锚点

当前页面：

<html>

    <form>
        <input type=button value="open in new tab" onClick="goToURL2()">
    </form>

    <body>
        <script type="text/javascript">
        <!--
            function goToURL2() { window.open( "explanations.html#footwell"); }
        // -->
        </script>
    </body>
</html>

新页面：

<html>
    <p><a name="footwell">
        O, say can you see by the dawn's early light?
    </a></p>
</html>

我认为“突出显示的文本”jQuery 将是最好的方法，但无法弄清楚如何处理多个 html 页面。

4

2 回答 2

1

您可以使用锚链接到新位置，就像您已经完成的那样。然后，在新页面上，您可以window.location.hash从 URL 中获取哈希值 ( ) 并突出显示共享该值的特定元素。

// untested, but close enough to convey the point
$(function(){
  var theHash = window.location.hash.split("#")[1];
  $("a[name='"+theHash+"']").parent("p").addClass("highlight");
});
于 2009-11-07T17:20:38.513 回答
1

也将 id 添加到 Anchor 标签

当您使用id. 只需从 URL 中获取 #part 并在 jQuery 选择器中使用它。

将您的第 2 页更改为：

<a id="footwell" name="footwell">...</a>

您可以选择要突出显示锚点的任何动画或添加其他人建议的类，但是您突出显示的部分将在整个过程中保持该类的设置，您将保持它的 CSS 类设置。通过使用动画，它会像我们习惯的那样突出显示（即使在 SO 上也是如此）。随着动画...

这是您必须放在第二页上的代码：

$(function() {
    $(window.location.hash).parent().animate(...)
});

你当然也可以使用这个插件来避免与自定义动画混在一起。

于 2009-11-07T17:24:58.803 回答