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

Question

该页面有一个包含多个内容 div 的容器 div。每个内容 div 都有一个命名的 anchor 。一次只显示一个内容 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 中使用有效的命名 anchor 请求页面，JavaScript/JQuery 将看到它并适本地设置各种显示属性，以便与命名 anchor 对应的内容可见。

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

Answer 1

您可以使用 location.hash 从 URL 中检索 anchor 。这将跨浏览器工作，并将在 $(document).ready 中工作。

例如:

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