如何使用JQuery/JavaScript/CSS实现显示请求的命名锚点 [英] How to implement displaying the requested named anchor using JQuery / JavaScript / CSS

问题描述

页面上有一个容器div，其中包含多个内容div.每个内容div都有一个命名锚.一次仅显示一个内容div:

The page has a container div which holds multiple content divs. Each content div has a named anchor. Only one of the content divs is displayed at a time:

示例:

<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将看到它并适当地设置各种显示属性，以便可见与命名锚点相对应的内容.

The desired behavior is that if someone requests the page using a valid named anchor in the URL, the JavaScript / JQuery will see it and set the various display properties appropriately so that the content corresponding to the named anchor is visible.

1. 请求URL是否可用于 jQuery的?
2. 正在检查命名 通常在网址中锚定 早于$(document).ready?()
3. 是 这很难在一个正确的 跨浏览器方式?
4. 是否存在用于从URL提取锚的库例程，或者每个人都滚动自己的正则表达式吗?

1. Is the requesting URL available to JQuery?
2. Is checking for named anchors in the URL usually done early in $(document).ready?()
3. Is this hard to get right in a cross-browser way?
4. Is there a library routine for extracting the anchor from an URL, or does everybody roll their own regular expression?

推荐答案

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

You can use location.hash to retrieve the anchor from the URL. This will work across browsers and will work in $(document).ready.

例如:

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

这篇关于如何使用JQuery/JavaScript/CSS实现显示请求的命名锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！