前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 换肤

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[

(function(){ var
(function(){ var

li =

("#skin li");
("#skin li");

li.click(function(){ switchSkin( this.id ); }); var cookie_skin =

.cookie( "MyCssSkin"); if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){
.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"); //设置不同皮肤
("#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>

代码语言:javascript
复制
<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

/**

*/

/**

  • 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{

代码语言:javascript
复制
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{

代码语言:javascript
复制
background-position:0px 0px;

}

skin_1{

代码语言:javascript
复制
background-position:15px 0px;

}

skin_2{

代码语言:javascript
复制
background-position:35px 0px;

}

skin_3{

代码语言:javascript
复制
background-position:55px 0px;

}

skin_4{

代码语言:javascript
复制
background-position:75px 0px;

}

skin_5{

代码语言:javascript
复制
background-position:95px 0px;

}

skin_0.selected{

代码语言:javascript
复制
background-position:0px 15px !important;

}

skin_1.selected{

代码语言:javascript
复制
background-position:15px 15px !important;

}

skin_2.selected{

代码语言:javascript
复制
background-position:35px 15px !important;

}

skin_3.selected{

代码语言:javascript
复制
background-position:55px 15px !important;

}

skin_4.selected{

代码语言:javascript
复制
background-position:75px 15px !important;

}

skin_5.selected{

代码语言:javascript
复制
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; }

skin_1.css

h1{ background:#BB3BD9; }

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.10.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html
  • jquery.cookie.js
  • default.css
  • div_side_0,#div_side_1
  • skin
  • skin li{
  • skin_0{
  • skin_1{
  • skin_2{
  • skin_3{
  • skin_4{
  • skin_5{
  • skin_0.selected{
  • skin_1.selected{
  • skin_2.selected{
  • skin_3.selected{
  • skin_4.selected{
  • skin_5.selected{
  • skin_1.css
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档