Tab-Navigation - выбор пользователя Remeber

Ответ 1

Вы можете использовать sessionStorage для хранения (пока пользовательский браузер открыт) последней используемой вкладки и извлекать каждый раз, когда загружается страница

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(document).scrollTop( $(sessionStorage.getItem('lastsessionid')).offset().top );
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

EDIT: Woooow, он превратился в столь проголосовавший ответ, я его улучшу. Основная идея моего решения - не изобретать колесо о стандарты W3C о

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

$(document).load(function(){
   if (sessionStorage.getItem('lastsessionid') != null){
       //go to anchor, simulates the link click
       $(sessionStorage.getItem('lastsessionid')).trigger('click');
   }
   $('a[href=#section*]').on('click', function(){
       sessionStorage.setItem('lastsessionid', this.href);
   });
});

Для какой-то информации, в старые времена веб-разработчики (я не так стар, но я запрограммировал до того, как javascript превратился в такой замечательный инструмент в рутину web dev) не мог так много полагаться на методы создания сценариев, поэтому то, что они делают для распространения какого-либо поведения, хранит привязку к некоторой переменной post/get и сохраняет это значение до тех пор, пока пользователь не достигнет желаемой процедуры, заставляя путь через ссылку загрузить С# {$ wishAnchor}, чтобы заставить поведение якоря. Очевидно, что это метод, который имеет свои недостатки и слепые пятна, но был очень распространен, когда javascript не был большой ролью в отрасли. Некоторым разработчикам может понадобиться эта идея при работе в таких небольших колодках из универмага, например, где браузеры пэдов слишком стары, чтобы хорошо работать с новыми функциями javascript ES4/ES5/ES6.

Ответ 2

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

1. Раздел вкладок, который вы разместили в этом вопросе (HTML)

2. Ajax post отправляет вкладку, выбранную для удаленного файла для хранения сеанса (JS)

3. Удаленный файл, который получит значение табуляции для хранения в сеансе (PHP)

AJAX POST Этот фрагмент будет прослушивать пользователя, чтобы щелкнуть вкладку, а затем отправить значение, выбранное в файл php для сохранения. Вы можете поместить это в отдельный файл или непосредственно в нижний колонтитул своей страницы. Убедитесь, что на вашей странице работает jquery.

$(".icon-cross").on("click",function(){
   var tabValue = $(this).attr('href');
   $.post('file-to-save-session.php', {tabSel: tabValue}, function(data){
       console.log(data);
   });
});

Быстрое объяснение... мы слушаем вкладку с щелчком класса (icon-cross), затем сохраняем значение атрибута href в var tabValue. Затем мы отправляем значение через ajax в файл php для сохранения. Как только он будет сохранен, он будет повторять полученное значение, и функция отобразит его в консоли для просмотра и отладки.

PHP FILE - SAVE TAB SELECTION Этот файл можно хранить в любом месте вашей файловой системы, просто убедитесь, что он правильно указал путь в запросе ajax.

<?php 

session_start(); 

if(isset($_POST['tabSel']) && $_POST['tabSel'] != ''){
   $_SESSION['selected_tab'] = $_POST['tabSel'];
   echo $_SESSION['selected_tab'];
}else{
   echo 'NO TAB SELECTION RECEIVED!';
}

?>

Это довольно понятно. Он прослушивает сообщение на странице с переменной, посланной через сообщение ajax. Если сообщение отправлено и сообщение не пустое, оно сохранит значение для сеанса. Если нет, он ничего не вернет и не коснется самой сессии.

ВАШ HTML-ФАЙЛ С ТАБЛЕМАМИ. Наконец, но не в последнюю очередь вы можете добавить этот фрагмент кода в начало страницы, чтобы просмотреть значение последней выбранной вкладки пользователем. Это будет отображаться на странице с вашими вкладками. Вам может потребоваться преобразовать html файл в php, если он еще не

<?php 
session_start(); 

if(isset($_SESSION['selected_tab'])){ 
    echo $_SESSION['selected_tab']; 
}
?>

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

Надеюсь, это поможет! Дайте мне знать, если вам нужна дополнительная помощь по этому вопросу:).

ОБНОВЛЕНИЕ: ПЕРЕДАЙТЕ JAVASCRIPT, ДОБАВЛЯЕМЫЙ ПЛЮГОМ: Добавьте это в нижнюю часть страницы (под всеми файлами js)

<?php if(isset($_SESSION['selected_tab'])){ ?>
    <script>
       $(".icon-cross").removeClass('tab-current');
       $("section").removeClass('content-current');
       $('[href="<?php echo $_SESSION['selected_tab']; ?>"]').addClass('tab-current');
       $('section<?php echo $_SESSION['selected_tab']; ?>').addClass('content-current');
    </script>
<?php } ?>

Первые две строки удалят текущий класс из всех выбранных вкладок и их заголовков, второй добавит класс на вкладку, сохраненную в сеансе. Если сеанс отсутствует, этот код не будет работать.

Ответ 3

Проблема в нормальных библиотеках для вкладок не сохраняет хэш ссылки на вкладку. Таким образом, ваш браузер не может отслеживать ход вкладок, и поэтому кнопка "Назад" не работает в случае вкладок, как вы ожидали.

Итак, идея состоит в том, чтобы сохранить ссылку # на вкладке href. Если кто-то сможет сохранить это, то браузер сможет отслеживать прогресс пользователей через вкладки и кнопку "Назад", чтобы поместить пользователя на предыдущую вкладку.

Вы можете сохранить значение # в свойстве hash window.location.

См. ответ ниже

Bootstrap 3: сохранить выбранную вкладку на странице обновления

У этого может быть решение для вас.

После того, как вы сохранили хэш и теперь можете обработать обратную кнопку браузера, обработайте свои переходы, захватив событие onhashchange javaScript.

Здесь вы можете изменить вкладки, когда пользователь обращается в браузере.

Надеюсь, это поможет.

Ответ 4

Дать идентификатор для каждой вкладки. Затем

$(".icon-cross").click(function(){
    var selected_id= $(this).attr('id);
    //save this id to cookie.Then retrieve this cookie value on next page visit
})

Ответ 5

Я думаю, вам нужно посмотреть на это https://css-tricks.com/using-the-html5-history-api/