Используйте якорь для отображения div - PullRequest
Новая
       5

Используйте якорь для отображения div

5 голосов
/ 17 мая 2010

Я использую jquery, и мне нужно выполнить несколько вещей.

1) Когда кто-то нажимает на ссылку (или в моем случае, на div), чтобы отобразить другой div, я хотел бы добавить привязку к URL.

Таким образом, если кто-то нажимает на ссылку "Live", div "live" скользит вниз, и мы добавляем #live к URL.

2) Если кто-то заходит на эту страницу и сохраняет привязку #live в конце URL, тогда «живой» div должен быть виден сразу же.

Я знаю, как обрабатывать основную часть функции slideDown (), если кто-то нажимает на элемент div. Я не знаю, как добавить хэштег или сделать так, чтобы при загрузке страницы этот хэштег проверялся и отображал соответствующий div.

Любая помощь, понимающая это, будет оценена. Заранее спасибо.

Ответы [ 2 ]

10 голосов
/ 17 мая 2010

Добавление хеша к URL-адресу так же просто, как манипулирование location.hash, например ::

$("a.live").click(function() {
    window.location.hash = 'live'; // not needed if the href is '#live'
});

Вы можете легко проверить его наличие и действовать в соответствии с его значением при загрузке страницы, например ::100100 

$(document).ready(function() {
    var hashVal = window.location.hash.split("#")[1];
    if(hashVal == 'live') {
        $("#live").show();
    }
});
5 голосов
/ 17 мая 2010

Если у вас была такая разметка: 

<a href="#div5" class="toggler">Toggle Div 5</a>
<div id="div5">Content for Div 5</div>

Вы можете сделать это в jQuery: 

$("a.toggler").click(function() {
  $(this.hash).slideToggle();
});

Или используйте rel или что-то с нажатием на div, например: 

<div rel="#div5" class="toggler">Toggle Div 5</a>
<div id="div5">Content for Div 5</div>

И настройте свой jQuery так: 

$("div.toggler").click(function() {
  var hash = $(this).attr("rel");
  $(hash).slideToggle();
  window.location.hash = hash;
});

Я бы порекомендовал использовать display:block; для привязки, чтобы делать то, что вы хотите, и использовать здесь поведение браузера по умолчанию, он позаботится о хэше при нажатии.

Независимо от того, какой подход выше, вы можете показать тот, который загружен на страницу, следующим образом: 

$(function() {
  if(location.hash != "") {
    $(location.hash + ":hidden").slideDown();
  }
});
...