JQuery给网页更换皮肤的方法

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

　　为了更好的提升用户体验，很多网页都有换肤的功能，那么这是怎么实现的那，其实，换肤只不过是在对应的位置改了Css样式罢了!!

　　下面就演示如何简单的换肤

　　在设计HTmL代码时，注意一些小技巧，可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同，这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表，通过操作该链接的href属性的值，从而实现换肤。即： 用户点击完就可以换肤了，但是，当用户刷新或者关闭浏览器时，皮肤又会被初始化，所以考虑用CooKie保存当前选择：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!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程序设计有所帮助。

时间： 2024-10-31 09:44:56

JQuery给网页更换皮肤的方法的相关文章

JQuery给网页更换皮肤的方法_jquery

本文实例讲述了JQuery给网页更换皮肤的方法.分享给大家供大家参考.具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! 下面就演示如何简单的换肤 在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤.即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器

Android 应用更换皮肤实现方法_Android

Android应用更换皮肤功能的实现思路        我们可以将皮肤包做成一个apk文件,在应用apk中读取皮肤包中的数据.        应用apk读取皮肤包apk的数据的条件        1. 有相同签名        2. AndroidManifest.xml中配置android:sharedUserId有相同的属性值        满足以上条件,两个apk就能互相访问数据了.        Android应用更换皮肤功能的实现步骤        1.应用程序和皮肤程序的Androi

Android 应用更换皮肤实现方法

Android应用更换皮肤功能的实现思路 我们可以将皮肤包做成一个apk文件,在应用apk中读取皮肤包中的数据. 应用apk读取皮肤包apk的数据的条件 1. 有相同签名 2. AndroidManifest.xml中配置android:sharedUserId有相同的属性值 满足以上条件,两个apk就能互相访问数据了. Android应用更换皮肤功能的实现步骤 1.应用程序和皮肤程序的AndroidManifest.xml中配置 XML/HTML代码 android:sharedUserId=

搜狗输入法更换皮肤的方法

  我们在桌面上看到搜狗拼音这个输入法,如图: 然后右键单击这个界面,选择更换皮肤选项,如图所示: 然后选择自己喜欢的皮肤即可,如图所示: ] ​我们可以看到更换好皮肤后的界面如图:

2345手机浏览器更换皮肤的方法

1).在电脑中我们找到"2345浏览器"然后打开界面点击[三横]细节如下;(如下图) 2)然后在浏览器设置中我们点击[基本设置],然后点击下方的[更换皮肤]再选择你要更换皮肤就可以啦.(如下图) 介绍:国内唯一可以免费打电话的手机浏览器,小巧稳定且最省流量,集成了网址导航.新闻资讯.影视娱乐.海量小说.糗事笑话等丰富内容!上网加速5倍,精准广告拦截!

360安全卫士更换皮肤的方法

我们首先双击运行桌面的360安全卫士,如图所示: 然后点击软件右上方的皮肤按钮,如图所示: 点击"添加更多皮肤"按钮,如图所示: 然后选择自己喜欢的皮肤并点击立即使用的按钮,如图所示: 我们可以看到软件的皮肤已经更换好了,如图所示:

360软件小助手更换皮肤的方法

我们首先登录360软件小助手. 然后我们鼠标右击如图所示的换肤按钮,如图所示: 然后点击自己喜欢的皮肤风格,如图所示: ​系统就会将当前的皮肤风格保存下来.

酷狗如何更换皮肤 酷狗更换皮肤方法详解

给各位酷狗软件的使用者们来详细的解析分享一下酷狗更换皮肤的方法. 教程分享: 点击酷狗音乐播放器右侧上方形状像衣服一样的图标,就可以选择您喜欢的皮肤和颜色了. 好了,以上的信息就是小编给各位酷狗的这一款软件的使用者们带来的详细的酷狗更换皮肤的方法解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在那是非常的清楚自制皮肤的方法了吧,那么大家就快去按照小编上面的方法去更换自己喜欢的皮肤去吧.

谷歌chrome浏览器如何更换皮肤

我们使用的谷歌chrome浏览器需要怎么更换皮肤呢?目前,很多浏览器都推出了主题皮肤的功能,这让用户的使用界面更个性化.不过,也有一些网友不知道怎么更换浏览器的皮肤.在今天的教程中,格子啦小编就给大家先分享一下很多网友都在关注的:谷歌浏览器更换皮肤的问题吧! 谷歌浏览器 谷歌浏览器更换皮肤的方法/步骤: 首先打开谷歌浏览器,点击右上角菜单,在菜单中选择设置. 在设置菜单中找到点击外观->获取主题背景按钮. 这时就打开了谷歌浏览器主题选择页面,我们在其中选择喜欢的主题皮肤. 点击选中主题的蓝色按钮