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

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

javascript jquery accordion anchor
person Thomas L Holaday    schedule 18.05.2009    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Например:

$("div.container > div").removeClass("lurk");
if (location.hash)
    $("#" + location.hash).addClass("lurk");
person ern    schedule 18.05.2009
comment
location.hash уже имеет # в начале. Кроме того, я думаю, что у вас есть свой addClass/removeClass задом наперед. :-) - person Ben Blank; 19.05.2009
comment
После внесения предложенных Беном Бланком исправлений это работает. Спасибо! - person Thomas L Holaday; 19.05.2009