jquery 换肤

用户5760343

发布于 2019-10-10 14:32:36

5740

发布于 2019-10-10 14:32:36

文章被收录于专栏：sktj

image.png

html

<!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" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script src="js/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[

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 }); } //]]> </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.cookie.js

/**

Cookie plugin
Copyright (c) 2006 Klaus Hartl (stilbuero.de)
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html

*/

/**

Create a cookie with the given name and value and other optional parameters.
@example $.cookie('the_cookie', 'the_value');
@desc Set the value of a cookie.
@example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
@desc Create a cookie with all available options.
@example $.cookie('the_cookie', 'the_value');
@desc Create a session cookie.
@example $.cookie('the_cookie', null);
@desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
used when the cookie was set.
@param String name The name of the cookie.
@param String value The value of the cookie.
@param Object options An object literal containing key/value pairs to provide optional cookie attributes.
@option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
If set to null or omitted, the cookie will be a session cookie and will not be retained
when the the browser exits.
@option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
@option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
@option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
require a secure protocol (like HTTPS).
@type undefined
@name $.cookie
@cat Plugins/Cookie
@author Klaus Hartl/klaus.hartl@stilbuero.de */

/**

Get the value of a cookie with the given name.
@example $.cookie('the_cookie');
@desc Get the value of a cookie.
@param String name The name of the cookie.
@return The value of the cookie.
@type String
@name $.cookie
@cat Plugins/Cookie
@author Klaus Hartl/klaus.hartl@stilbuero.de */ jQuery.cookie = function(name, value, options) { 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 } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... 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; } };

default.css

*{ margin:0px; padding:0px; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

div_side_0,#div_side_1

{ float:left; width:120px; height:450px; }

skin

{ margin:10px; padding:5px; width:210px; padding-right:0px; list-style:none; border: 1px solid #CCCCCC; overflow:hidden; }

skin li{

float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(theme.gif);

}

skin_0{

background-position:0px 0px;

}

skin_1{

background-position:15px 0px;

}

skin_2{

background-position:35px 0px;

}

skin_3{

background-position:55px 0px;

}

skin_4{

background-position:75px 0px;

}

skin_5{

background-position:95px 0px;

}

skin_0.selected{

background-position:0px 15px !important;

}

skin_1.selected{

background-position:15px 15px !important;

}

skin_2.selected{

background-position:35px 15px !important;

}

skin_3.selected{

background-position:55px 15px !important;

}

skin_4.selected{

background-position:75px 15px !important;

}

skin_5.selected{

background-position:95px 15px !important;

} .title { cursor:pointer;} h1{ margin:10px; padding:10px 20px; width:60px; color:#ffffff; font-size:14px; } a:link { text-decoration: none; color: #333333; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; }