Сохранить состояние ссылки по ссылке с помощью jQuery?

Question

$('#nav a').click(function () {  
    $('#nav a').removeClass('current');  
    $(this).addClass('current');
    return false;  
});

Мой HTML-код:

<ul id="nav">
<li><a class="current hoc" href="#spread1-anchor">Home</a> /</li>
<li><a class="bgc" href="#spread2-anchor">Background</a> /</li>
<li><a class="apc" href="#spread3-anchor">Approach</a> /</li>
<li><a class="clc" href="#spread4-anchor">Client</a> /</li>
<li><a class="sec" href="#spread5-anchor">Services</a> /</li>
<li><a class="coc" href="#spread5-anchor">Contact</a></li>
</ul>

И если это поможет, мой URL: Пример сайта Karls

Используя приведенный выше код jQuery - как сохранить последнюю нажатую ссылку, когда пользователь обновит страницу? Я новичок в jQuery, и хотя я уже видел ответы на них, большинство из них связано с ползунками или аккордеонами, и поэтому они слишком сложны для понимания на этом этапе моего обучения! :)

Пожалуйста, кто-нибудь может помочь и, возможно, показать, как реализовать код или плагин, если он требуется (я видел плагин cookie в моих путешествиях по сети)

Answer 1

У ваших ссылок есть идентификаторы?Если это так, просто сохраните идентификатор в файле cookie при нажатии.Итак, что-то вроде этого:

$('#nav a').click(function () {
  $.cookie('lastclicked',this.id);
  $('#nav a').removeClass('current');  
  $(this).addClass('current');
  return false;  
});

Использование jQuery cookie-плагина снижает фактор раздражения при прямой установке cookie-файла.При загрузке страницы найдите файл cookie (см. Документацию), прочитайте его значение, если оно есть, и теперь вы знаете идентификатор последней нажатой ссылки.

Answer 2

Зачем использовать куки? У ваших ссылок есть свойство хеша, поэтому я бы просто вручную установил хеш адресной строки после завершения анимации.

Вы не включили код, который выполняет анимацию прокрутки, но сохранили значение хеш-функции из <a>, который был нажат в переменной, а затем в обратном вызове для анимации установите location.hash.

Что-то вроде:

$('a').click(function() {
    // get the hash from the link
    var hash = this.hash;
    // Do the animation. (This is just example code.)
    // In the callback to the animation, manually set the location bar's hash
    $(document.body).animate({scrollLeft: 500}, 600, function() { 
                                                       location.hash = hash; 
                                                     });
    return false;
});

Тогда, если пользователь обновит страницу, там будет хеш.

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

Answer 3

Прежде всего, вам нужен способ уникальной идентификации ссылок - подойдет либо id, либо атрибут href. Затем захватите код, который будет обрабатывать куки для вас. Я буду использовать тот из quirksmode.org .

Вы можете сохранить уникальный идентификатор последнего использованного якоря следующим образом:

$('#nav a').click(function(){
    $(this).addClass('current').siblings().removeClass('current');

    // Create a cookie that will last 30 days with 
    // the name "link" containing this anchor's id attribute
    createCookie('link', this.id, 30);
    return false;
});

Когда загружается следующая страница, прочитайте файл cookie следующим образом:

var lastLink = readCookie('link');

if(lastLink){
    $('#' + lastLink).addClass('lastVisited');
}

Answer 4

Я бы использовал плагин jQuery Address вместо файлов cookie, чтобы он работал во всех окнах / вкладках браузера, а также обеспечивал глубокие ссылки.

$('#nav a').click(function () {
  $.address.parameter('lastclicked', this.id);
  $('#nav a').removeClass('current');
  $(this).addClass('current');
  return false;
});