Есть ли способ сохранить выбранную jQuery вкладку после обновления страницы?

Question

У меня есть экран, который использует вкладки jQuery и задавался вопросом, смогу ли я сохранить выбранную вкладку после обновления страницы (JS .reload();)?

Любое руководство оценено.

Answer 1

https://github.com/carhartl/jquery-cookie

или

http://code.google.com/p/cookies/downloads/detail?name=jquery.cookies.2.2.0.js.zip&can=2&q=

Пример jquery.cookies.2.2.0.js

$(document).ready(function() { 
    var initialTabIndex = 0; 
    var jCookies = jQuery.cookies; 

    //alert('getting ' + jCookies.get("currentTab")); 

    if(jCookies.get("currentTab") != null){ 
     initialTabIndex = jCookies.get("currentTab"); 
    } 

    $('#tabs').tabs({ 
     activate : function(e, ui) { 
     //alert('setting ' + ui.newTab.index()); 
     jCookies.set("currentTab", ui.newTab.index().toString()); 
     }, 
     active : initialTabIndex 
    }); 
}); 

Answer 2

Хотя предыдущий ответ, используя куки, конечно, работать, это, вероятно, не идеальное решение, данное народам, склонным принимать куки. (это также означает, что вам нужно будет показать отказ на своем сайте, указав, что вы используете файлы cookie, по крайней мере, для посетителей из ЕС). Я бы рекомендовал избегать использования файлов cookie, где это возможно, чтобы ваш сайт оставался работоспособным, если файлы cookie отключены или отклонены.

Лучше всего использовать «хэш» в конце URL-адреса.

Измените вкладку ссылки следующим образом:

<div id="UITabs"> 
<ul> 
    <li><a href="#Tab1">Tab 1</a></li> 
    <li><a href="#Tab2">Tab 2</a></li> 
    <li><a href="#Tab3">Tab 3</a></li> 
</ul> 
<div id="Tab1"></div> 
<div id="Tab2"></div> 
<div id="Tab3"></div> 
</div> 

Тогда в голове, добавьте следующий JavaScript для обеспечения хэш устанавливается при смене вкладок, и получить хэш PageLoad и отобразить нужную вкладку:

$(document).ready(function() { 

    $(function() { 
     $("#UITabs").tabs(); 

     $("#UITabs").bind("tabsshow", function (event, ui) { 
      location.hash = ui.newTab.find('a.ui-tabs-anchor').attr('href'); 
     }); 

     $(window).bind('hashchange', function (e) { 
      $("#UITabs").tabs("select", location.hash); 
     }); 
    }); 
});