Как реализовать отображение запрошенного именованного якоря с помощью jQuery / JavaScript / CSS

Question

На странице есть контейнер 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).готовы?()
3. Неужели это трудно исправить с помощью кроссбраузерного способа?
4. Существует ли библиотечная процедура для извлечения привязки из URL-адреса, или каждый использует свое собственное регулярное выражение?

Answer 1

Вы можете использовать location.hash чтобы извлечь привязку из URL-адреса.Это будет работать во всех браузерах и будет работать в $(document).ready.

Например:

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