我遇到了以下问题:
我想在页面开始时隐藏“#Before”和“#After”。 - 当我点击“返回”按钮时，应该显示“#Before”。 - 当我点击“Go Forward”按钮时，应该显示“#After”。
但是当我单击以仅显示其中一个元素时，然后刷新页面。刷新后，还会显示其他元素。所以我看到了两个元素，尽管我只点击了一个按钮。
当我只想切换并保存两个元素之一，或者我还想切换这两个元素时，如何修改此代码以让它工作。
这几天找了很多，都没找到。 我会非常感激，你会拯救我的一天!
链接到 jsfiddle 上的代码
https://jsfiddle.net/bisch_basch/6orxn6kq/10/
HTML 代码:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type='text/javascript' src='main.js'></script>
<body>
<div class="menu" id="myHeader">
<a style="float:left" href="#">Menu</a>
<a id="Before" href="#"> Back </a>
<a id="Current" href="#"> Current </a>
<a id="After" href="#"> After </a>
</div>
<button id="Button1"> Go Back </button>
<button id="Button2"> Go Forward </button>
</body>
</html>
JavaScript 代码
$(document).ready(function(){
$("#Before").css('display','none');
$("#After").css('display','none');
$("#Button1").click(function(){
$("#Before").toggle();
var isVisible = $("#Before").is(":visible");
localStorage.setItem('visible', isVisible);
});
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$("#Before").toggle(isVisible);
$("#Button2").click(function(){
$("#After").toggle();
var isVisible = $("#After").is(":visible");
localStorage.setItem('visible', isVisible);
});
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$("#After").toggle(isVisible);
});
最佳答案
这是你需要的吗？
$(function() {
var isVisible;
$("#After, #Before").toggle(false);
if (localStorage.getItem('before_visible') != null) {
isVisible = localStorage.getItem('before_visible') === 'false' ? false : true;
$("#Before").toggle(isVisible);
}
if (localStorage.getItem('after_visible') != null) {
isVisible = localStorage.getItem('after_visible') === 'false' ? false : true;
$("#After").toggle(isVisible);
}
$("#Button1").click(function(){
$("#Before").toggle();
localStorage.setItem('before_visible', $("#Before").is(":visible"));
});
$("#Button2").click(function(){
$("#After").toggle();
localStorage.setItem('after_visible', $("#After").is(":visible"));
});
});
关于javascript - 使用本地存储javascript点击刷新页面上的元素切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49220602/