今天使用一款新的插件,用jquery的cookie插件来实现网页的换肤。首先准备页面文件,同时引入jquery的cookie插件,代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<!-- 引入jQuery的cookie插件 -->
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
<title>Jquery Plugin Test</title>
</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>
初始化的页面如下
这里我做了个css文件夹,将skin_1.css, skin_2.css, skin_3.css, skin_4.css,
skin_5.css分别放入其中,网页默认应用的是skin_0.css。当我点击小方格的时候,网页默认要显示应用的皮肤。
jquery脚本代码如下:
$(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") //当前<li>元素选中
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
好了,这个时候,就可以应用换肤了,由于引入了cookie插件,所以当我们刷新的时候,还是会应用你选中的皮肤,而不会还原。
如图:
网页换肤的效果就达到了。
- 大小: 5.5 KB
- 大小: 6.8 KB
- 大小: 6.2 KB
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
jquery cookie官方插件
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jQuery Cookie 插件使用及查看cookie 注:在默认情况下,只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie,必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie ...
Write Less, Do More, 超详细的jQuery学习笔记,深入了解jQuery的语法,为前段开发带来更多的方便
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jQuery操作cookie的插件,大概的使用方法如下$.cookie('the_cookie'); //读取Cookie值$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值$.cookie(’the_cookie’, ‘the_value’, {expires ‘/’, domain ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
jQuery_Cookie - Cookie操作插件 。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!