JQuery给网页更换皮肤的方法

2024-05-06 16:21:04

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JQuery给网页更换皮肤的方法,用到了jQuery页面元素获取、样式及链式操作的相关技巧,需要的朋友可以参考下

本文实例讲述了JQuery给网页更换皮肤的方法。分享给大家供大家参考。具体分析如下：

为了更好的提升用户体验，很多网页都有换肤的功能，那么这是怎么实现的那，其实，换肤只不过是在对应的位置改了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" />



<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>



<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>