I have responsive css tabs I use to display information in an elegant manner but when user refresh page it goes back to first checked input. I would like to know how to keep the user button selected on page refresh the one who he previously selected. I wrote a script but it does not seem to work.
tabs
<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
<script>
$(document).ready(function(){
$('.inputabs input[type="radio"]').each(function(){
$(this).attr("checked",$(this).checked());
}
);
</script>
I have responsive css tabs I use to display information in an elegant manner but when user refresh page it goes back to first checked input. I would like to know how to keep the user button selected on page refresh the one who he previously selected. I wrote a script but it does not seem to work.
tabs
<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
<script>
$(document).ready(function(){
$('.inputabs input[type="radio"]').each(function(){
$(this).attr("checked",$(this).checked());
}
);
</script>
- 3 You will have to pass information upon the page refresh or use some sort of storage otherwise when the page reloads any changes via javascript will be lost. – NewToJS Commented Feb 20, 2017 at 2:57
-
@NewToJS: do you mind teaching by example?
:-D– Sebastian Farham Commented Feb 20, 2017 at 3:05
1 Answer
Reset to default 10Will the following work for you requirement:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742358724a4428959.html
评论列表（0条）