首先,是基于Jquery换肤的Js代码,如下://Switch Style
$(document).ready(function(){
function changeStyle(url){$("#stylewitch"/*引用Css文件所在的link标签内元素名称*/).attr("href","/Style/"+url);}
if(url == null){url == "Style.css"}
var url = mycookie("style");
changeStyle(url);
//自定义增减CSS文件
$("#Style").click(function(){changeStyle("Style.css");mycookie("style","Style.css",{expires:7});});
$("#StyleB").click(function(){changeStyle("StyleB.css");mycookie("style","StyleB.css",{expires:7});});
$("#StyleC").click(function(){changeStyle("StyleC.css");mycookie("style","StyleC.css",{expires:7});});
$("#StyleD").click(function(){changeStyle("StyleD.css");mycookie("style","StyleD.css",{expires:7});});
//可以在这里增加你的Css样式
})
//Cookie Function,Developer Home page:http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
function mycookie(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};然后是应用换肤的网页文件代码:<!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=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>test</title>
<link rel="stylesheet" rev="stylesheet" href="/Style/Style.css" type="text/css" media="all" id="stylewitch" />
<script type="text/javascript" src="/Js/jquery.js"></script>
<script type="text/javascript" src="/Js/stylewitch.js"></script>
</head>
<body>
<div id="Header" class="ClearFix">
<dl>
<dt>风格切换</dt>
<dd>
<em id="Style" class="Cursor" title="默认风格">默认风格</em>
<em id="StyleB" class="Cursor" title="B">深蓝风格</em>
<em id="StyleC" class="Cursor" title="C">火红风格</em>
<em id="StyleD" class="Cursor" title="D">鲜绿风格</em>
</dd>
</dl>
</div>
</body>
</html>stylewitch.js是顶部js的代码,在这里用外部连接.
<link rel="stylesheet" rev="stylesheet" href="/Style/Style.css" type="text/css" media="all" id="stylewitch" />
上面的Link标签处是网页默认加载的CSS文件,也是换肤的位置。不知道是什么原因,初次打开网页时,网页并不会加载默认的CSS文件,因为Cookie还未写入客户端,可是JS代码里明明有if(url == null){url == "Style.css"} ,却没有任何作用呢?
请高手指点下,谢谢了!!
$(document).ready(function(){
function changeStyle(url){$("#stylewitch"/*引用Css文件所在的link标签内元素名称*/).attr("href","/Style/"+url);}
if(url == null){url == "Style.css"}
var url = mycookie("style");
changeStyle(url);
//自定义增减CSS文件
$("#Style").click(function(){changeStyle("Style.css");mycookie("style","Style.css",{expires:7});});
$("#StyleB").click(function(){changeStyle("StyleB.css");mycookie("style","StyleB.css",{expires:7});});
$("#StyleC").click(function(){changeStyle("StyleC.css");mycookie("style","StyleC.css",{expires:7});});
$("#StyleD").click(function(){changeStyle("StyleD.css");mycookie("style","StyleD.css",{expires:7});});
//可以在这里增加你的Css样式
})
//Cookie Function,Developer Home page:http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
function mycookie(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};然后是应用换肤的网页文件代码:<!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=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>test</title>
<link rel="stylesheet" rev="stylesheet" href="/Style/Style.css" type="text/css" media="all" id="stylewitch" />
<script type="text/javascript" src="/Js/jquery.js"></script>
<script type="text/javascript" src="/Js/stylewitch.js"></script>
</head>
<body>
<div id="Header" class="ClearFix">
<dl>
<dt>风格切换</dt>
<dd>
<em id="Style" class="Cursor" title="默认风格">默认风格</em>
<em id="StyleB" class="Cursor" title="B">深蓝风格</em>
<em id="StyleC" class="Cursor" title="C">火红风格</em>
<em id="StyleD" class="Cursor" title="D">鲜绿风格</em>
</dd>
</dl>
</div>
</body>
</html>stylewitch.js是顶部js的代码,在这里用外部连接.
<link rel="stylesheet" rev="stylesheet" href="/Style/Style.css" type="text/css" media="all" id="stylewitch" />
上面的Link标签处是网页默认加载的CSS文件,也是换肤的位置。不知道是什么原因,初次打开网页时,网页并不会加载默认的CSS文件,因为Cookie还未写入客户端,可是JS代码里明明有if(url == null){url == "Style.css"} ,却没有任何作用呢?
请高手指点下,谢谢了!!
解决方案 »
- 包含SELECT的拖动层变换OPTION时候为什么页面会闪?
- 关于iframe制作的HTML编辑器的问题, 在线等待
- 点按钮 表格就显示出来,这里哪有错,帮我改改
- JSP表单问题求大神解答
- 怎么用javascri语言t登陆窗口输入账号密码后怎么调到主界面去
- 为什么不能设置Cell的背景色?
- 用户端media player控件的版本信息问题
- 求助Frame的问题,困扰了很久了
- 请孟老师直击!!!其他大哥大姐也请参与!
- 如何做到這樣的窗口效果?
- how to access data from jquery plugin's event?
- 错误 3 “" + result1[2] + "”不是有效标识符。
有可能是undefined
if(url == null){url == "Style.css"}
var url = mycookie("style");改成var url = mycookie("style");
if(url == null){url == "Style.css"}试试