为了更好的提升用户体验，很多网页都有换肤的功能，那么这是怎么实现的那，其实，换肤只不过是在对应的位置改了Css样式罢了！！
下面就演示如何简单的换肤
在设计HTmL代码时，注意一些小技巧，可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同，这样皮肤切换的 *** 作就简单多了样式连接要带一个有Id样式的连接表，通过 *** 作该链接的href属性的值，从而实现换肤。即：
用户点击完就可以换肤了，但是，当用户刷新或者关闭浏览器时，皮肤又会被初始化，所以考虑用CooKie保存当前选择：
<!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>
<title></title>
<link
href="css/default.css"
rel="stylesheet"
type="text/css"
/>
<link
href="css/skin_0.css"
rel="stylesheet"
type="text/css"
id="cssfile"
/>
<!--
引入jQuery
-->
<script
src="../scripts/jquery-1.3.1.js"
type="text/javascript"></script>
<!--
引入jQuery的cookie插件
-->
<script
src="js/jquery.cookie.js"
type="text/javascript"></script>
<script
type="text/javascript">
//<![CDATA[
$(function(){
var
$li
=$("#skin
li")
$li.click(function(){
switchSkin(
this.id
)
})
var
cookie_skin
=
$.cookie(
"MyCssSkin")
if
(cookie_skin)
{
switchSkin(
cookie_skin
)
}
})
function
switchSkin(skinName){
$("#"+skinName).addClass("selected").siblings().removeClass("selected")
//当前<li>元素选中
//去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+
skinName
+".css")
//设置不同皮肤
$.cookie(
"MyCssSkin"
,
skinName
,
{
path:
'/',
expires:
10
})
}
//]]>
</script>
</head>
<body>
<ul
id="skin">
<li
id="skin_0"
title="灰色"
class="selected">灰色</li>
<li
id="skin_1"
title="紫色">紫色</li>
<li
id="skin_2"
title="红色">红色</li>
<li
id="skin_3"
title="天蓝色">天蓝色</li>
<li
id="skin_4"
title="橙色">橙色</li>
<li
id="skin_5"
title="淡绿色">淡绿色</li>
</ul>
<div
id="div_side_0">
<div
id="news">
<h1
class="title">时事新闻</h1>
</div>
</div>
<div
id="div_side_1">
<div
id="game">
<h1
class="title">娱乐新闻</h1>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
皮肤一般都是css样式也就是怎么替换css样式
<link rel="stylesheet" href="">
$('head link').attr('href','css路径')
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）