Кнопка назад в браузере сломана между скрытыми div

Question

Прежде всего, эти страницы никогда не будут в сети, но будут во внутренней памяти. Это группа связанных документов - электронная книга.

http://www.anmldr.com/testdivs

Когда я нажимаю на ссылку в первом div, второй div становится видимым, а первый div скрыт. Проблема с кнопкой назад браузера. Если затем нажать кнопку «Назад», URL-адрес обновится, но первый div больше не будет отображаться. Как я могу исправить кнопку «назад», чтобы отображался первый div? Ссылка со второго div на первый div работает нормально, но это кнопка браузера назад, с которой я не знаю, как работать.

Спасибо, Linda

P.S. Они используют CSS3, поэтому лучше использовать браузер на основе WebKit.

Answer 1

Плагин jQuery выполняет проверку текущего URL каждые 100 миллисекунд и, как только его хеш-часть изменяется, он запускает сброс содержимого с помощью функции обратного вызова. Это довольно неэффективно и грубо, но я не думаю, что есть другой способ. Вы можете сделать это, добавив этот скрипт в заголовок:

<script>
  var lastHash = window.location.hash || "nothing";
  setInterval(function() {
    if (lastHash != window.location.hash) {
      if (window.location.hash == '#offscreen') {
       document.getElementById('offscreen').className = 'slideInFromRightToLeft';
       document.getElementById('div1').className = 'slideLeftOut imInvisible';
      } else {
       document.getElementById('offscreen').className = 'slideRightOut imInvisible';
       document.getElementById('div1').className = 'slideInLeftToRight';
      }
    }
  }, 100);
</script>

Таким образом, вы также можете удалить обработчики onClick и поместить всю логику в эту функцию.

Answer 2

Я думаю, что лучше всего использовать следующий код:

$(window).load(*GetSelectedItem*);

Пример функции GetSelectedItem приведен ниже:

function GetSelectedItem() 
{
    var chosen = "";
    var len = document.signUpFrm.frmUserChoiceForActionPropertyType.length;

    $('#display_spacer').hide();

    $('#display_industry_type').hide(); 
    document.signUpFrm.industry_type.value = '-1';

    $('#display_warehouse_type').hide(); 
    document.signUpFrm.warehouse_type.value = '-1';

    $('#display_commercial_type').hide(); 
    document.signUpFrm.commercial_type.value = '-1';

    for (i = 0; i <len; i++) 
    {
        if (document.signUpFrm.frmUserChoiceForActionPropertyType[i].checked) 
        {
            chosen = document.signUpFrm.frmUserChoiceForActionPropertyType[i].value;
            showHideErrorMsg('frmUserChoiceForActionPropertyType','',0);
        }
    }
    if (chosen == "") 
    {
        alert("No Location Chosen");
    }
    else if (chosen == "Industry")
    {
        $('#display_spacer').show();    
        $('#display_industry_type').show();
    }
    else if (chosen == "Warehouse")
    {
        $('#display_spacer').show();    
        $('#display_warehouse_type').show();
    }
    else if (chosen == "Commercial")
    {
        $('#display_spacer').show();    
        $('#display_commercial_type').show();
    }
}

Я не уверен, что это можно сделать без JQuery. Да, вы можете посмотреть на код JQuery! :)

Но это работает для меня.

В случае возникновения каких-либо вопросов, вы можете отправить мне фрагмент кода на ak.81 на live dot com.

Cheers, Annu

Answer 3

Попробуйте это:

http://www.mikage.to/jquery/jquery_history.html