jQuery - Помните положение меню на смену страницы

Question

У меня есть разбитое на большие страницы большое меню - пользователь видит 12 элементов за раз в панели.

Сво меню справа, здесь: http://bartlettstudio.com/

Вы можете увидеть мой вопрос, когда вы нажимаете на более проекты и выбрать ссылку из этой второй панели.

Возьмите эту, например: http://bartlettstudio.com/projects/dog-named-lucky/

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

Вопрос

Может кто-нибудь помочь мне понять, как подойти к этому вопросу? Другие упоминали использование jQuery hashchange, но это доказало свою способность преодолеть мою голову. Может ли кто-нибудь подумать о другом способе решить эту проблему?

С многом благодаря

Терри

Answer 1

Чем больше проектов, ссылка может быть изменен, чтобы иметь HREF в это позволяет сказать:

<a href="#more-1" class="next">More Projects</a> 

Тогда следующий OnClick вы можете сделать что-то вроде этого в JQuery :

jQuery(function ($) { 

    if(window.location.hash) { 
     // onLoad hash was detected 
     console.log('onLoad hash detected // do something to position menu'); 

     // window.location.hash starts with a # following with the string behind it 
     // window.location.hash.slice(1) gets the string only 
    } 


    // This isn't needed but quessing you already have an onClick set up for this element... 
    $('a.next').click(function (e) { 
     /* 
     Don't do e.preventDefault()! The browser will add the href hash value itself if you only specified the hash! 
     If you want to preventit you will have to set the hash yourself like this: 

     window.location.hash = 'more-1'; 
     */ 

     // do stuff, possibly with the href value since you have it anyway 


     // I reccommend that you change the value of the href to specify the next hash value change 
     $(this).attr('href', '#more-2'); 
    }); 

});