Question

我有响应式css选项卡，用于以优雅的方式显示信息，但当用户刷新页面时，它会返回到第一个检查输入。我想知道如何保持页面上选择的用户按钮刷新他之前选择的用户按钮。我写了一个脚本，但似乎没有用。

突片

  <input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
  <label class="labeltabs" for="tab1">Inbox</label>

  <input class="inputabs" id="tab2" type="radio" name="tabs" >
  <label class="labeltabs"for="tab2">Important</label>

  <input class="inputabs" id="tab3" type="radio" name="tabs">
  <label class="labeltabs" for="tab3">Bin</label>

脚本

<script>
$(document).ready(function(){
    $('.inputabs input[type="radio"]').each(function(){
        $(this).attr("checked",$(this).checked());
    }
);
</script>

Answer 1

以下是否适合您的要求：

<!DOCTYPE html>
 <html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      if(localStorage.selected) {
        $('#' + localStorage.selected ).attr('checked', true);
      }
      $('.inputabs').click(function(){
        localStorage.setItem("selected", this.id);
      });
    });

</script>
 </head>
 <body>
  <input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked">
  <label class="labeltabs" for="tab1">Inbox</label>

  <input class="inputabs" id="tab2" type="radio" name="tabs" >
  <label class="labeltabs"for="tab2">Important</label>

  <input class="inputabs" id="tab3" type="radio" name="tabs">
  <label class="labeltabs" for="tab3">Bin</label>
 </body>
 </html>

Php Javascript：在页面刷新时选择单选按钮

1 个答案: