JQuery给网页更换皮肤的方法
本文实例讲述了JQuery给网页更换皮肤的方法。分享给大家供大家参考。具体分析如下：
为了更好的提升用户体验，很多网页都有换肤的功能，那么这是怎么实现的那，其实，换肤只不过是在对应的位置改了Css样式罢了！！
下面就演示如何简单的换肤
在设计HTmL代码时，注意一些小技巧，可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同，这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表，通过操作该链接的href属性的值，从而实现换肤。即：用户点击完就可以换肤了，但是，当用户刷新或者关闭浏览器时，皮肤又会被初始化，所以考虑用CooKie保存当前选择：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<linkhref="css/default.css"rel="stylesheet"type="text/css"/>
<linkhref="css/skin_0.css"rel="stylesheet"type="text/css"id="cssfile"/>
<!--引入jQuery-->
<scriptsrc="../scripts/jquery-1.3.1.js"type="text/javascript"></script>
<!--引入jQuery的cookie插件-->
<scriptsrc="js/jquery.cookie.js"type="text/javascript"></script>
<scripttype="text/javascript">
//<![CDATA[
$(function(){
var$li=$("#skinli");
$li.click(function(){
switchSkin(this.id);
});
varcookie_skin=$.cookie("MyCssSkin");
if(cookie_skin){
switchSkin(cookie_skin);
}
});
functionswitchSkin(skinName){
$("#"+skinName).addClass("selected").siblings().removeClass("selected");
//当前<li>元素选中
//去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+skinName+".css");
//设置不同皮肤
$.cookie("MyCssSkin",skinName,{path:'/',expires:10});
}
//]]>
</script>
</head>
<body>
<ulid="skin">
<liid="skin_0"title="灰色"class="selected">灰色</li>
<liid="skin_1"title="紫色">紫色</li>
<liid="skin_2"title="红色">红色</li>
<liid="skin_3"title="天蓝色">天蓝色</li>
<liid="skin_4"title="橙色">橙色</li>
<liid="skin_5"title="淡绿色">淡绿色</li>
</ul>
<divid="div_side_0">
<divid="news">
<h1class="title">时事新闻</h1>
</div>
</div>
<divid="div_side_1">
<divid="game">
<h1class="title">娱乐新闻</h1>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。