需要一些帮助。 我为一个页面制作了一个背景选择器,所以基本上有4个不同的背景图像供用户选择。
这是我用于此的代码和脚本:
HTML:
<ul>
<li id="color-1"></li>
<li id="color-2"></li>
<li id="color-3"></li>
<li id="color-4"></li>
</ul>
SCRIPT:
<script>
$('ul li').click(function() {
var background = $(this).css('background-image');
$("html, body").css("background-image", background);
});
</script>
问题是当我切换页面时,背景图像重置为默认值。 我知道这可以通过设置cookie来处理。我尝试了几种方法,但都没有用。
有人可以帮我解决这个问题。 谢谢你。
答案 0 :(得分:1)
选择后,将背景存储在localStorage
中<script>
$('ul li').click(function() {
var background = $(this).css('background-image');
$("html, body").css("background-image", background);
localStorage.background = background;
});
</script>
加载页面时,请应用它。
$("html, body").css("background-image", localStorage.background);
答案 1 :(得分:0)
将背景变量保存在cookie中:
document.cookie = "bgimage=" + background;
然后获取cookie:
$(function(){
var bgCookie = getCookie("bgimage");
$("html, body").css("background-image", bgCookie);
});
function getCookie(name) {
var parts = document.cookie.split(name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
getCookie()
方法取自:Get cookie by name
答案 2 :(得分:0)
您可以将custom-background.js插件添加到您的网站