Seb*_*ham 4 html javascript css php jquery
我有响应式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>
Run Code Online (Sandbox Code Playgroud)
脚本
<script>
$(document).ready(function(){
$('.inputabs input[type="radio"]').each(function(){
$(this).attr("checked",$(this).checked());
}
);
</script>
Run Code Online (Sandbox Code Playgroud)
小智 10
以下是否适合您的要求:
<!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>
Run Code Online (Sandbox Code Playgroud)