2

我试图弄清楚当用户使用后退按钮返回时如何让我的网页看起来相同。在我的示例中，单击一个复选框，然后单击它显示的 url。访问 google 或 yahoo 后，单击后退按钮并注意不再显示该 URL。该复选框仍处于选中状态，但没有 url。

$(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();
    }
  });
});
<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>

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

4

2 回答 2

2

您可以缩小代码并在 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');
    //})
})
于 2012-09-27T02:15:06.833 回答
0

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

于 2012-09-27T02:11:37.010 回答