Jquery+cookie选择样式表文件[试验田]
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换样式表</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="switchStyle.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
</head>
<body>
<h1>hello baby</h1>
<a href="#" class="styles" rel="style1">style1</a>
<a href="#" class="styles" rel="style2">style2</a>
<a href="#" class="styles" rel="style3">style3</a>
</body>
</html>
JS:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换样式表</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="switchStyle.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
</head>
<body>
<h1>hello baby</h1>
<a href="#" class="styles" rel="style1">style1</a>
<a href="#" class="styles" rel="style2">style2</a>
<a href="#" class="styles" rel="style3">style3</a>
</body>
</html>
$(function(){
$('.styles').click(function()
{
switchStyle(this.rel); //this.rel 取出当前元素属性rel的值,也可以使用id
return false;
});
var c=readCookie('style');
if (c) switchStylestyle(c);
});
function switchStyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i) //遍历link
{
this.disabled=true;
if(this.title == styleName)this.disabled = false;
});
createCookie('style',styleName,365);
}
function createCookie(name,value,days){
if(days)
{
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));//1000毫秒 getTime()取从1970.1.1到当前时间毫秒
var expires=" ; expires="+date.toGMTString();
}else var expires=" ";
document.cookie=name+"="+value+expires+" ; path=/";
}
function readCookie(name){
var nameEQ=name+"=";
var ca=document.cookie.split(';');
for(var i=0;i<ca.length;i++){
var c=ca[i];
while(c.charAt(0)==" ") c=c.substring(1,c.length); //charAt(0) 看C的0位置是什么,如果c不存在返回" "
if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name){
createcokie(name,"",-1)
}
css文件3个.$('.styles').click(function()
{
switchStyle(this.rel); //this.rel 取出当前元素属性rel的值,也可以使用id
return false;
});
var c=readCookie('style');
if (c) switchStylestyle(c);
});
function switchStyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i) //遍历link
{
this.disabled=true;
if(this.title == styleName)this.disabled = false;
});
createCookie('style',styleName,365);
}
function createCookie(name,value,days){
if(days)
{
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));//1000毫秒 getTime()取从1970.1.1到当前时间毫秒
var expires=" ; expires="+date.toGMTString();
}else var expires=" ";
document.cookie=name+"="+value+expires+" ; path=/";
}
function readCookie(name){
var nameEQ=name+"=";
var ca=document.cookie.split(';');
for(var i=0;i<ca.length;i++){
var c=ca[i];
while(c.charAt(0)==" ") c=c.substring(1,c.length); //charAt(0) 看C的0位置是什么,如果c不存在返回" "
if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name){
createcokie(name,"",-1)
}
style1.css :
body{background:#CCCCCC;}
h1{color:red;}
style2.css :
body{background:#6699FF;}
h1{color:#336600;}
style3.css :
body{background:#CC99CC;}
h1{color:#FFFF00;}
■ 拿起勇气,探索你未知的世界。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端