【js与jquery】网站更换皮肤功能

来源：互联网发布：手机pdf转软件编辑：程序博客网时间：2024/05/06 15:25

1.效果如下：

2.html代码：

<div id="header"><link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /><a id="logo" href="#">Jane Shopping</a><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>

3.jquery代码：

jQuery.cookie = function(name, value, options) {//jquery插件    if (typeof value != 'undefined') { // name and value given, set cookie        options = options || {};        if (value === null) {            value = '';            options.expires = -1;        }        var expires = '';        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {            var date;            if (typeof options.expires == 'number') {                date = new Date();                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));            } else {                date = options.expires;            }            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE        }               var path = options.path ? '; path=' + (options.path) : '';        var domain = options.domain ? '; domain=' + (options.domain) : '';        var secure = options.secure ? '; secure' : '';        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');    } else { // only name given, get cookie        var cookieValue = null;        if (document.cookie && document.cookie != '') {            var cookies = document.cookie.split(';');            for (var i = 0; i < cookies.length; i++) {                var cookie = jQuery.trim(cookies[i]);                // Does this cookie string begin with the name we want?                if (cookie.substring(0, name.length + 1) == (name + '=')) {                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));                    break;                }            }        }        return cookieValue;    }};

//网站换肤$(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","styles/skin/"+ skinName +".css"); //设置不同皮肤$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });}