博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【js与jquery】网站更换皮肤功能
阅读量:7074 次
发布时间:2019-06-28

本文共 2284 字,大约阅读时间需要 7 分钟。

hot3.png

2.html代码:

[php] 

  1. <div id="header">  

  2.     <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />  

  3.     <a id="logo" href="#">Jane Shopping</a>  

  4.     <ul id="skin">  

  5.         <li id="skin_0" title="蓝色" class="selected">蓝色</li>  

  6.         <li id="skin_1" title="紫色">紫色</li>  

  7.         <li id="skin_2" title="红色">红色</li>  

  8.         <li id="skin_3" title="天蓝色">天蓝色</li>  

  9.         <li id="skin_4" title="橙色">橙色</li>  

  10.         <li id="skin_5" title="淡绿色">淡绿色</li>  

  11.     </ul>  

  12. </div>  

3.jquery代码:

[php] 

  1. jQuery.cookie = function(name, value, options) {

    //jquery插件  

  2.     if (typeof value != 'undefined') { // name and value given, set cookie  

  3.         options = options || {};  

  4.         if (value === null) {  

  5.             value = '';  

  6.             options.expires = -1;  

  7.         }  

  8.         var expires = '';  

  9.         if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {  

  10.             var date;  

  11.             if (typeof options.expires == 'number') {  

  12.                 date = new Date();  

  13.                 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  

  14.             } else {  

  15.                 date = options.expires;  

  16.             }  

  17.             expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE  

  18.         }  

  19.          

  20.         var path = options.path ? '; path=' + (options.path) : '';  

  21.         var domain = options.domain ? '; domain=' + (options.domain) : '';  

  22.         var secure = options.secure ? '; secure' : '';  

  23.         document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');  

  24.     } else { // only name given, get cookie  

  25.         var cookieValue = null;  

  26.         if (document.cookie && document.cookie != '') {  

  27.             var cookies = document.cookie.split(';');  

  28.             for (var i = 0; i < cookies.length; i++) {  

  29.                 var cookie = jQuery.trim(cookies[i]);  

  30.                 // Does this cookie string begin with the name we want?  

  31.                 if (cookie.substring(0, name.length + 1) == (name + '=')) {  

  32.                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  

  33.                     break;  

  34.                 }  

  35.             }  

  36.         }  

  37.         return cookieValue;  

  38.     }  

  39. };  

 

[php] 

  1. //网站换肤  

  2. $(function(){  

  3.         var $li =$("#skin li");  

  4.         $li.click(function(){  

  5.             switchSkin( this.id );  

  6.         });  

  7.         var cookie_skin = $.cookie("MyCssSkin");  

  8.         if (cookie_skin) {  

  9.             switchSkin( cookie_skin );  

  10.         }  

  11. });  

  12.   

  13. function switchSkin(skinName){  

  14.         $("#"+skinName).addClass("selected")                //当前<li>元素选中  

  15.                        .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中  

  16.         $("#cssfile").attr("href","styles/skin/"+ skinName +".css"); //设置不同皮肤  

  17.         $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });  

  18. }  

转载于:https://my.oschina.net/yonghan/blog/523178

你可能感兴趣的文章
Oracle Number用法
查看>>
nat
查看>>
基于Cisco技术的MPLS原理以及应用实现[一]
查看>>
iPhone/Mac Objective-C内存管理原理
查看>>
极速理解设计模式系列:14.轻量级模式(Flyweight Pattern)
查看>>
Resin HTTPS 安装指南
查看>>
无法加入域
查看>>
在RHEL5下构建LAMP网站服务平台之架设Discuz!论坛
查看>>
.NET应用架构设计:原则、模式与实践 目录预览
查看>>
关于vector性能的测试(一)
查看>>
【移动开发】Android应用开发者应该知道的东西
查看>>
Oracle Study之案例--通过IPCS查看共享内存之“怪现象”
查看>>
func 安装之艰辛历程
查看>>
Ubuntu Server 10.10 操作手记
查看>>
Java静态代码分析工具Infer
查看>>
AIX系统学习之-CRS安装后校验
查看>>
从Code Review 谈如何做技术(zz)酷 壳
查看>>
Internet Connectivity Evaluation Tool
查看>>
LAMP 全功能编译安装 for CentOS6.3笔记(更新)
查看>>
javascript中的数据类型、Object与Function
查看>>