Javascript保持div切換頁面刷新

Question

我正在嘗試在提交表單或刷新頁面時在登錄/注冊表單上保持div切換。

如何使用cookie.js來記住已切換的div，並在提交表單或刷新頁面時使其保持切換狀態？

<a id="myHeader1" href="javascript:showonlyone('newboxes2');">Login</a>
<a id="myHeader2" href="javascript:showonlyone('newboxes3');">Register</a>  

<div class="newboxes" id="newboxes1" style="display: block">
  default image
</div>

<div class="newboxes" id="newboxes2" style="display: none"> 
 login box
</div>

<div class="newboxes" id="newboxes3" style="display: none"> 
register box
</div>          

和

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
         $(this).show(200);
    }
    else {
         $(this).hide(600);
    }
});
}
</script>

謝謝您的幫助！

Answer 1

使用一個Cookie插件像這一個 ，然后

function showonlyone(thechosenone) {
    $('.newboxes').not('#' + thechosenone).hide(600);
    $('#' + thechosenone).show(600);
    $.cookie('thechosenone', thechosenone);
}

jQuery(function($){
    var thechosenone = $.cookie('thechosenone');
    if(thechosenone){
        showonlyone(thechosenone)
    }
})

演示： 小提琴

Answer 2

I updated the answer.

啟用了Cookie的實時演示

禁用Cookie的實時演示

on load, you see the default picture.
on button1 click, you see the login.
on button2 click, you see the register.
and it appears the same way when you refresh the page (cookie setup)