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

使用像this one这样的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)
    }
})

演示：Fiddle

Answer 2

I updated the answer.

live demo with cookies enabled

live demo with cookies disabled

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)

Javascript在页面刷新时保持div切换

2 个答案: