![](/img/trans.png)
[英]How to keep changes made to a class when the page refreshes with Javascript
[英]How to keep the changes made to DOM by javascript/jquery on page refresh
我的问题是当我点击一个链接(例如Second Page )时,它会在屏幕上显示第二页。 但是当我重新加载页面时,当前页面没有保存,而是恢复到默认页面。
如何防止所需页面刷新到默认页面?
JavaScript:
<script type="text/javascript">
$(function(){
$('.one').show();
$('.two').hide();
$('.three').hide();
$('#show_one, #show_one1').click(function(){
$('.one').show();
$('.two').hide();
$('.three').hide();
$('.modal').modal('hide');
return false;
});
$('#show_two, #show_two2').click(function(){
$('.one').hide();
$('.two').show();
$('.three').hide();
$('.modal').modal('hide');
return false;
});
$('#show_three, #show_three3').click(function(){
$('.one').hide();
$('.two').hide();
$('.three').show();
$('.modal').modal('hide');
return false;
});
});
</script>
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="" id="show_one"> One</a></li>
<li><a href="" id="show_two"> Two</a></li>
<li><a href="" id="show_three"> Three</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="show_one1" class="btn btn-info" data-dismiss="modal" aria-hidden="true">One</button>
<button type="button" id="show_two2" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Two</button>
<button type="button" id="show_three3" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Three</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="one">
<div class="row">
<center>
Page 1
</center>
</div>
</div>
<div class="two">
<div class="row">
<center>
Page 2
</center>
</div>
</div>
<div class="three">
<div class="row">
<center>
Page 3
</center>
</div>
</div>
</div>
当您使用 javascript 更改 DOM 的状态时,它将在页面重新加载时重置为实际状态。 如果您希望能够存储此状态并在重新加载时以相同状态显示 DOM,则必须使用localStorage 或 sessionStorage 。 在这种情况下,我将使用 sessionStorage 向您展示如何做到这一点。 您可以在此处阅读差异 - http://www.w3schools.com/html/html5_webstorage.asp
工作示例
如何实现这一点的完整工作示例在这里 - http://codepen.io/nitishdhar/pen/DGHkw
您可以切换到某个页面,然后刷新浏览器窗口,它只会停留在该页面上。
详细说明
首先,您处理节目的方式可以像这样改进-
您只需将一个通用类添加到您希望页面更改事件触发的所有链接/按钮中,并在其中存储数据属性,定义单击时应打开哪个页面,如下所示 -
对于链接
<li><a href="#" class="show-page" data-page="one"> One</a></li>
<li><a href="#" class="show-page" data-page="two"> Two</a></li>
<li><a href="#" class="show-page" data-page="three"> Three</a></li>
注意我添加的 class & data-page 属性。 我还给href 加了一个#,这样你就不必在点击事件时返回false。 你也可以使用 javascript:void(0); 而不是 # 如果你不希望你的窗口哈希得到更新。
对于按钮也
<button type="button" class="btn btn-info show-page modal-btn" data-page="one" data-dismiss="modal" aria-hidden="true">One</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="two" data-dismiss="modal" aria-hidden="true">Two</button>
<button type="button" class="btn btn-info show-page modal-btn" data-page="three" data-dismiss="modal" aria-hidden="true">Three</button>
我还仅向在模态内呈现的按钮添加了一个 modal-btn 类。 这是为了仅处理模态中的按钮的模态隐藏事件。 没有必要将 modal('hide') 附加到其他链接。
现在在你的 javascript 中让它工作,你会做这样的事情 -
$('.show-page').click(function(){
/* Get the Page to Show */
var pageToShow = $(this).data('page');
/* Hide all pages first */
$('.page').addClass('hide');
/* Show the page whose link was clicked */
$('.' + pageToShow).removeClass('hide');
});
$('.modal-btn').click(function() {
$('.modal').modal('hide');
});
所以我们试图绑定每个具有类 show-page 的元素的点击事件。 然后点击我们读取特定点击元素的数据页面属性中的内容。 然后我们隐藏所有页面并仅显示其持有人被点击的页面。 这样您就不必为所有按钮编写单独的事件处理程序。
我也在单独处理模态的隐藏。
使用会话存储
现在会话存储是浏览器存储,它将为您保存当前会话的一些数据,即直到用户关闭浏览器窗口。
我们将维护一个变量来保存用户之前所在的最后一页,就像这样 -
/* Check if session has some page to show stored */
if(typeof(Storage)!== "undefined" && sessionStorage.getItem('pageToShow')) {
var pageToShow = sessionStorage.getItem('pageToShow');
/* Hide all pages first */
$('.page').addClass('hide');
/* Show the page whose link was clicked */
$('.' + pageToShow).removeClass('hide');
/* Also set this page to session storage */
sessionStorage.setItem('pageToShow', pageToShow);
}
现在,在用户尝试移动到页面时的点击事件中,我们将不断更新会话变量“pageToShow”,如下所示 -
$('.show-page').click(function(){
/* Get the Page to Show */
var pageToShow = $(this).data('page');
/* Hide all pages first */
$('.page').addClass('hide');
/* Show the page whose link was clicked */
$('.' + pageToShow).removeClass('hide');
if(typeof(Storage)!=="undefined") {
sessionStorage.setItem('pageToShow', pageToShow);
}
});
现在,如果用户也刷新页面,我们将首先检查是否在会话中设置了 pageToShow,如果设置了,我们将移动到该页面,就像您想要的那样。
注意:如果您希望 pageToShow 变量在用户关闭并稍后重新打开浏览器后保持不变,您可以使用 localStorage 而不是 sesstionStorage。
将所有内容都设置为<a href="javascript:void(0)">
,您就大功告成了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.