CSS实现显示请求的命名锚点

CSS实现显示请求的命名锚点

本文介绍了如何使用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 toJQuery?
  2. Is checking for namedanchors in the URL usually doneearly in $(document).ready?()
  3. Isthis hard to get right in across-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实现显示请求的命名锚点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 06:27