javascript - 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)