gpt4 book ai didi

javascript - 记住不同样式表的 Cookie 问题

转载 作者:行者123 更新时间:2023-11-30 05:50:34 24 4
gpt4 key购买 nike

我正在创建一个允许用户更改配色方案和文本大小的网站。我正在使用 cookie,因此当他们更改页面时,它会记住他们选择的配色方案/文本大小。

问题是网站没有同时正确“记住”配色方案和字体。

当只使用一个或另一个时,它工作正常,例如选择配色方案时,它会记住每个页面上所选的配色方案。

但是,当我更改配色方案并尝试更改字体大小时,网站会停止记住所选的配色方案并返回到默认配色方案(但会记住文本大小)。

我猜这是因为我设置了两个 cookie 而不是一个,但在尝试设置一个时我无法让代码工作。

<link class="changeme" rel="stylesheet" type="text/css" href="default.css"      title="Standard" />
<link rel="stylesheet" type="text/css" href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

<!-- Loading Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>
<script> if($.cookie("css")) {
$("link.changeme").attr("href",$.cookie("css"));
}
$(document).ready(function() {
$("#nav li a").click(function() {
$("link.changeme").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>
<script>
if($.cookie("css2")) {
$("link.changeme").attr("href",$.cookie("css2"));
}
$(document).ready(function() {
$("#resize li a").click(function() {
$("link.changeme").attr("href",$(this).attr('rel'));
$.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>

改变样式表

<div id="colourscheme">
<ul id="nav">
<li><a class="colourtext">Colour Scheme: </a></li>
<li><a class="default" href="#" rel="default.css">Default</a></li>
<li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
</ul>

 <!-- Adjust font size -->
<div id="textadjustment">
<ul id="resize">
<li><a class="textsize">Resize Text: </a></li>
<li><a class="small" href="#" rel="default.css">A</a></li>
<li><a class="medium" href="#" rel="large.css">A</a></li>
<li><a class="large" href="#" rel="largest.css">A</a></li>
</ul>
</div>

我还在学习这个问题,如果回答起来很简单,我深表歉意!

最佳答案

使用两个样式表引用。

HTML 文档

<!doctype html>
<html>
<head>
<link class="colorCss" rel="stylesheet" type="text/css" href="defaultColor.css" />
<link class="fontCss" rel="stylesheet" type="text/css" href="defaultFont.css" />
<link rel="stylesheet" type="text/css"
href="twitter/jquery.jtweetsanywhere-1.3.1.css" />

<!-- Loading Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="twitter/jquery.jtweetsanywhere-1.3.1.js"></script>

<script type="text/javascript">

if($.cookie("css")) {
$("link.colorCss").attr("href",$.cookie("css"));
}

if($.cookie("css2")) {

$("link.fontCss").attr("href",$.cookie("css2"));
}

$(document).ready(function() {
$("#nav li a").click(function() {
$("link.colorCss").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});

$("#resize li a").click(function() {

$("link.fontCss").attr("href",$(this).attr('rel'));

$.cookie("css2",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>
</head>
<body>
<div id="colourscheme">
<ul id="nav">
<li><span class="colourtext">Colour Scheme: </span></li>
<li><a class="default" href="#" rel="defaultColor.css">Default</a></li>
<li><a class="wandb" href="#" rel="alternative.css">White and Black</a></li>
</ul>
</div>

<div id="textadjustment">
<ul id="resize">
<li><span class="textsize">Resize Text: </span></li>
<li><a class="small" href="#" rel="defaultFont.css">Default</a></li>
<li><a class="medium" href="#" rel="large.css">Large</a></li>
<li><a class="large" href="#" rel="largest.css">Largest</a></li>
</ul>
</div>
</body>
</html>

默认颜色.css

body {
background-color: #aa0000;
color: #0000aa;
}

默认字体.css

body {
font-size: 12px;
}

替代.css

body {
background-color: #000;
color: #aaa;
}

大型.css

body {
font-size: 14px;
}

最大的.css

body {
font-size: 18px;
}

关于javascript - 记住不同样式表的 Cookie 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15100277/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com