JQuery/JavaScript/CSSを使用してリクエストされた名前付きアンカーを表示する実装方法

Question

このページには、複数のコンテンツ div を保持するコンテナ div があります。各コンテンツ div には名前付きアンカーがあります。一度に表示されるコンテンツ div は 1 つだけです。

例：

<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");