Загрузка с помощью AJAX и привязка к загруженному контенту

Я создаю веб-сайт для организации коллекций комиксов.

Таким образом, слева у вас есть список ваших комиксов, и если вы нажмете на один из них, страница с подробной информацией об этом комиксе будет загружена справа с помощью AJAX с функцией jQuery load().

У меня есть страница не для каждого комикса, а для каждой серии (одна для всех «Ходячих мертвецов», одна для всех «Человеков-пауков»....), поэтому на каждой странице может быть много разных комиксов.

Однако при нажатии на конкретный комикс я хочу не только загрузить правильную страницу, но и перейти в правильное положение на этой странице.

У меня есть якоря на каждой странице (#i12,#i13 с уникальным номером каждый раз).

Как я могу после загрузки контента с помощью AJAX перейти к правильному якорю? Я попытался динамически изменить URL-адрес страницы (добавив #i12 в конце), но безуспешно.

Я использовал document.location.hash, плохая идея?

Очень простой пример: при нажатии на ссылку страница загружается в div, и я хочу, чтобы страница прокручивалась до якоря #i120

Главная страница :

<div id="list">
<a href="test.php#i120">Go to num 120</a>
</div>
<div id="content">

</div>

Javascript:

$("a").live('click',function (event)
{
    $("#Content").load(this.href);

    event.stopImmediatePropagation();
    event.preventDefault();
});

Страница Test.php:

<div id="i1">Text1</div>
...
...
<div id="i120">Text120</div>

jquery ajax anchor
person Loïc Février    schedule 29.10.2010    source источник
comment
Можете ли вы опубликовать jQuery, с которым вы работаете? И репрезентативный отрывок из вашего html?   -  person David says reinstate Monica    schedule 30.10.2010
comment
Опубликован чрезвычайно упрощенный код.   -  person Loïc Février    schedule 30.10.2010
comment
В этом случае я бы согласился с @tandu, ниже.   -  person David says reinstate Monica    schedule 30.10.2010

Ответы (2)


arrow_upward
4
arrow_downward

Во-первых, давайте избавимся от недействительных идентификаторов, они не могут начинаться с цифры до HTML5, я бы добавил к вашим идентификаторам что-то вроде id="nav1".

Эта часть очистки, что вы можете сделать для прокрутки:

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      document.location.hash = hash;
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

Это запустится после загрузки контента, так что есть что прокрутить. Этот подход мгновенно идет туда, поэтому анимировать его... это тоже достаточно просто:

$("a").live('click', function(event) {
    var hash = this.hash;
    $("#Content").load(this.href, function() {
      var st = $(hash).scrollTop();
      $('html, body').animate({ scrollTop: st }, 200); //200ms duration
    });
    event.stopImmediatePropagation();
    event.preventDefault();
});

Мы храним this.hash как переменную, потому что внутри этого обратного вызова this будет ссылаться на элемент #Content, а не на привязку, на которую мы нажали.

person Nick Craver    schedule 30.10.2010
comment
Спасибо. Неверный идентификатор исправлен. На практике это не было недействительным (например: #comic120), но я упростил его в вопросе.... - person Loïc Février; 30.10.2010

arrow_upward
2
arrow_downward

Jquery ScrollTo, вероятно, лучший выбор.

В противном случае я бы предложил разместить на странице несколько невидимых ссылок (например, ‹a href="#1" id="link1"›‹/a›), а затем, после завершения ajax, и у вас есть идентификатор #, который вы запускаете:

$("#link" + idnumber).click();

Просто, но очень эффективно.

person Explosion Pills    schedule 29.10.2010
comment
Спасибо. Я искал что-то, что не использует внешний скрипт, но я посмотрю на это. - person Loïc Février; 30.10.2010