Question

我试图找出当用户使用后退按钮返回时如何让我的网页看起来一样。在我的示例中，单击复选框，然后单击它显示的URL。进入谷歌或雅虎后，点击后退按钮，注意不再显示网址。仍然选中该复选框，但没有网址。

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
</head>
<body>

<script type="text/javascript">
$(document).ready(function() {
        $("#googlelink").hide();
        $("#yahoolink").hide();

        $("#google").click(function() {
            if($('#google:checked').length) {
                $("#googlelink").show();
            } else {
                $("#googlelink").hide();
            }
        });

        $("#yahoo").click(function() {
            if($('#yahoo:checked').length) {
                $("#yahoolink").show();
            } else {
                $("#yahoolink").hide();
            }
        });
    })
</script>

<div class="check">
<p><input type="checkbox" value="google" id="google" /> 
    <label for="google">show google link</label></p>  
<p><input type="checkbox" value="yahoo" id="yahoo" /> 
    <label for="yahoo">show yahoo link</label></p>
</div>

<div id="googlelink"><a href="http://google.com">google.com</a> </div>
<div id="yahoolink"> <a href="http://yahoo.com">yahoo.com</a></div>

</body>
</html>

Answer 1

您可以缩小代码并在DOMReady上触发更改事件。

$(document).ready(function() {
    $("#googlelink, #yahoolink").hide();

    $("input[type=checkbox]").on('change', function() {
           var id = '#' + this.id + 'link';
           $(id).css('display', this.checked ? 'block' : 'none');
    }).change();

    //$("input[type=checkbox]").each(function() {
    //   var id = '#' + this.id + 'link';
    //   $(id).css('display', this.checked ? 'block' : 'none');
    //})
})

Answer 2

这听起来像浏览器行为。例如，Chrome在页面之间向前和向后导航时，即使设置了表单中的某些选项，也会清空所有文本字段。

jquery .show（）和后退按钮

2 个答案: