сохранить содержимое вкладки при обновлении с помощью ajax

#php #html #ajax

#php #HTML #ajax

Вопрос:

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

HTML-файл: index.php :

 <div id="header">
    <ul id="header-link">
        <li data-content='Home'>HOME</li>
        <li data-content='ContactUs'>Contact Us</li>
        <li data-content='Login'>Login</li>
    </ul>
</div>

<div id="link-content"></div>

Файл JavaScript: script.js

 $(document).ready(function() {
    $('li').click(function() {
        $.ajax({
            type: 'GET',
            url: 'Content/' $(this).data('content') '.php',
            dataType: 'html',
            async: false,
            success: function(response) {
                $('#link-content').html(response);
            }
        })
    })
});

1. Вы могли бы поиграть с историей браузера и добавить параметры URL. Они могут быть оценены с помощью js для загрузки правильного содержимого

2. Взгляните на это: developer.mozilla.org/en-US/docs/Web/API/History_API Если вам нужна поддержка IE 9, используйте локальное хранилище или сеансы php

Ответ №1:

Я предлагаю вам установить сеанс или cookie для вашего веб-браузера с текущим выбранным вами меню. После этого вы можете проверить состояние сеанса с текущей активной страницей.

Вот код javascript для настройки сеанса в браузере:

sessionStorage.setItem(‘active_menu’, ‘Your_Current_page’);

Ответ №2:

Я использую ваш код в качестве примера и пытаюсь установить cookie как tabIndex , и пока вы нажимаете на конкретный файл li и получаете успешный ответ в AJAX, я просто устанавливаю значение cookie и добавляю class=active в этот конкретный li файл.

При обновлении вашей страницы, если найдено значение cookie, просто добавьте class=active в конкретное li значение.

Пожалуйста, попробуйте этот код.

index.php

 <div id="header">
  <ul id="header-link">
    <li data-content='Home'>HOME</li>
    <li data-content='ContactUs'>Contact Us</li>
    <li data-content='Login'>Login</li>
  </ul>
</div>

<div id="link-content"></div>

script.js

 <script type="text/javascript">
  function getCookie(name) {
    var value = "; "   document.cookie;
    var parts = value.split("; "   name   "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
  }

  $(document).ready(function() {
    if(getCookie('tabIndex') != '' amp;amp; getCookie('tabIndex') != 'undefined'){
        $('#header-link li').each(function(i) { 
           if($(this).attr('data-content') == getCookie('tabIndex')){
                $(this).addClass('active');
           }
        });
    }

    $('li').click(function() {
        var currentElement = $(this);

        $.ajax({
            type: 'GET',
            url: 'Content/' $(this).data('content') '.php',
            dataType: 'html',
            async: false,
            success: function(response) {
                $('#header-link li').removeClass('active');
                document.cookie = "tabIndex="   currentElement.attr('data-content');
                currentElement.addClass('active');
                $('#link-content').html(response);
            }
        })
    })
  });
</script>