本文实例讲述了jQuery Cookie实现切换皮肤功能。分享给大家供大家参考,具体如下:
最近在学习Jquery,发现框架真的是非常强大,短短几行代码就能实现切换皮肤的功能。
1)关键代码
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlewww.jb51.net jQuery Cookie切换皮肤/title链接id=' CSS文件' href=' style/Skins/skin _ 0。CSS“rel=”外部no follow“rel=”样式表type=' text/CSS '/link href=' style/site。CSS“rel=”外部no follow“rel=”样式表type=' text/CSS '/脚本src=' http 3360脚本/jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/脚本src=' http 3333单击(function(){ var Skinid=this。id;切换皮肤(SkinID);});var skinID=$ .cookie(' SkinID ');//获取cookie if (skinID) {//如果甜饼干存在,切换皮肤切换皮肤(SkinID);} });函数switch skin(SkinID){ $(“#”SkinID).addClass(')选定')。兄弟姐妹()。removeClass(“”选定');var CSshref=' style/SkinID/' SkinID ' .CSS ';$('#cssfile ').attr('href ',cssHref);$.cookie('skinID ',skinID,{ path: '/',过期: 10 });//将皮肤样式的编号保存到甜饼干中}/script/head body form id=' form 1 ' runat=' server ' div id=' header ' hello world!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/表单/正文/html运行效果:
2)完整实例代码点击此处本站下载。
更多关于框架相关内容感兴趣的读者可查看本站专题: 《jQuery的cookie操作技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》
希望本文所述对大家框架程序设计有所帮助。