javascript - 如何使用 JQuery / JavaScript / CSS 实现显示请求的命名锚点

Question

该页面有一个包含多个内容 div 的容器 div。每个内容 div 都有一个命名的锚点。一次只显示一个内容 div：

例子：

<style>
  .lurk { display: none; }
</style>
<div class="container">
  <div id="c1">
    <a name="#c1">One</a> is the loneliest number.
  </div>
  <div id="c2" class="lurk">
    <a name="#c2">Two</a> is company.
  </div>
  <div id="c3" class="lurk">
    <a name="#c3">Three</a> is a crowd.
  </div>
</div>
<script>
// ... something that adds and removes the lurk class from the content divs
</script>

期望的行为是，如果有人在 URL 中使用有效的命名锚点请求页面，JavaScript / JQuery 将看到它并适当地设置各种显示属性，以便与命名锚点对应的内容可见。

1. 请求的 URL 对 JQuery 可用吗？
2. 检查 URL 中的命名锚点是否通常在 $(document).ready 的早期完成？()
3. 这很难以跨浏览器的方式实现吗？
4. 是否有用于从 URL 中提取锚点的库例程，或者每个人都使用自己的正则表达式？

Answer 1

您可以使用location.hash从 URL 中检索锚点。这将适用于浏览器，并且适用于$(document).ready.

例如：

$("div.container > div").removeClass("lurk");
if (location.hash)
    $("#" + location.hash).addClass("lurk");