Question

我有这个问题让我说我点击一个事件（例如单选按钮2）来显示（）div2和hide（）div1。之后，我点击一个链接重定向到下一页。

然后我点击后退按钮（浏览器＆lt ;-)。选中单选按钮2，但显示为div1而不是div2。这是一个示例源代码。如果可以解决这个问题，任何人都可以帮助我。

<!-- test.php START -->
<div id="div_1" style="display: block;">
    <p>First Paragraph</p>
</div>
<div id="div_2" style="display: none;">
    <p>Second Paragraph</p>
</div>


<div>
    <input type="radio" id="rdo1" name="radio" checked/>First
    <input type="radio" id="rdo2" name="radio" />Second
</div>

<div>
    <a href="test1.php">Just to reload the page or go to other page</a>
</div>

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script>
    $(document).ready(function() {
        $("#rdo1").click(function () {

            $("#div_1").show();
            $("#div_2").hide();
        });

        $("#rdo2").click(function () {
            $("#div_1").hide();
            console.log('test');
            $("#div_2").show();
        });
    });
</script>
<!-- test.php END-->

<!-- test1.php START -->
 DISPLAY SOMETHING
<!-- test1.php END -->

Answer 1

网络无状态，默认情况下，浏览器不记得上一页的任何设置。所以，当您按下后退按钮时，它就像一个页面刷新，就像您打开默认页面一样默认HTML

这是预期和默认行为

如果您想要您期望的行为，那么您需要缓存页面或将状态存储在会话或cookie中。

Answer 2

您必须以某种方式保存状态，服务器端使用ajax或表单帖子，或通过客户端使用cookie或localStorage。

您可以使用jquery-cookie plugin轻松设置Cookie，也可以使用vanilla javascript设置localStorage，如下例所示：

<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>

Answer 3

您可以在DOMReady上检查选择了哪个无线电输入。

$(document).ready(function() {
       var ind = $('input[name=radio]:checked').index();
       $('div[id^=div]').hide().eq(ind).show()

        $("#rdo1").click(function () {  
            $("#div_1").show();
            $("#div_2").hide();
        });

        $("#rdo2").click(function () {
            $("#div_1").hide();
            console.log('test');
            $("#div_2").show();
        });
})

Answer 4

if ($('#rdo1').attr('checked')){
         $("#div_1").show();
         $("#div_2").hide();
}
if ($('#rdo2').attr('checked')){
         $("#div_1").hide();
         $("#div_2").show();
}

 $("#rdo1").click(function () {

    $("#div_1").show();
    $("#div_2").hide();
});

$("#rdo2").click(function () {
    $("#div_1").hide();
    console.log('test');
    $("#div_2").show();
});

单击返回后显示HTML显示的最后状态

4 个答案: