[英]Cookie issue with remembering different stylesheets
我正在創建一個網站,允許用戶更改配色方案和文本大小。 我正在使用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>
defaultColor.css
body {
background-color: #aa0000;
color: #0000aa;
}
defaultFont.css
body {
font-size: 12px;
}
alternative.css
body {
background-color: #000;
color: #aaa;
}
large.css
body {
font-size: 14px;
}
largest.css
body {
font-size: 18px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.