<!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" />

     <!--   引入jQuery -->

     <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

     <!--   引入jQuery的cookie插件  使用说明：http://www.jb51.net/article/44181.htm -->

     <script src="js/jquery.cookie.js" type="text/javascript"></script>

     <script type="text/javascript">

         //<![CDATA[

         $(function(){

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

             $li.click(function(){

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

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

                 $("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同皮肤

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

             });

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

             if (cookie_skin) {

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

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

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

                     $.cookie( "MyCssSkin" ,  cookie_skin  , { 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>

优化后代码：

 <!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" />

     <!--   引入jQuery -->

     <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

     <!--   引入jQuery的cookie插件 -->

     <script src="js/jquery.cookie.js" type="text/javascript"></script>

     <script type="text/javascript">

         //<![CDATA[

         $(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","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>

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;

 }

skin_0.css:

h1{

   background:#999999;

}

　skin_1.css:

h1{

   background:#BB3BD9;

}

　　......

jquery 更换皮肤的更多相关文章

  1. 为Visual Studio更换皮肤和背景图

    最近在博客上别人在老早之前就有加了背景图,想想怎么能这么out,于是乎,百度一下,能否知道? 咳咳,资源还是有滴!可惜都是比较旧的跟新版本的配置方法可能有点不一样, 可能会有很多人会觉得不适应,不过没 ...

  2. WinForm 使用皮肤，且单击按更换皮肤。

    运行效果: 首先把DLL程序集文件和SSK皮肤文件放在要运行程序的DEBug文件夹下,然后引入引用. 之后可以在程序里写代码了. private void Form2_Load(object send ...

  3. WPF通过DynamicResource实现给界面动态更换皮肤

    在我们的程序中有时候需要去实现动态更换皮肤的效果,从而完成一些个性化的设置,那么我们究竟怎样去实现动态换皮肤的效果呢?那么我们经常用到的就是设置不同的Style,并且在主程序的xaml文件中通过Dyn ...

  4. vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换

    参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解 思路:通过自己上一篇博客https://ww ...

  5. 给Visual Studio更换皮肤和背景图

    1.先安装更换皮肤的插件 VS菜单栏里面找到:工具>扩展和更新>联机>搜索: Theme Editor 下载并安装: 安装后先不着急重启VS 然后,安装可更改背景图片的插件:工具&g ...

  6. java 24 - 9 GUI 之 给窗体换图标、设置启动在屏幕中间、更换皮肤

    A.首先更改窗体左上角的图片 步骤一: 创建3个包,分别建立1个类 第一个是窗体的包,窗体类:设置窗体的主要布置和功能 第二个是资源包,图片:把想要改的图案拉进来 第三个是UI界面包,UI界面设计类: ...

  7. XtraForm中更换皮肤

    前提: 默认皮肤的显示http://www.cnblogs.com/chucklu/p/4785572.html 1.修改XtraForm的LookAndFeel的SkinName属性,设置为Cara ...

  8. Vistual Studio 2012更换皮肤

    早就装上VS2012了,可是除了在家里练习玩玩的时候使用外,在公司都还在用2010,也没好好研究过2012.这两天把公司的电脑换了系统,也就把vs换成了2012.可是看着不是白白的皮肤就是深色的皮肤, ...

  9. winfroms更换皮肤

    一.添加控件lrisSkin.dll 然后把继承的窗体更换成别人做好的窗体类 能达到换肤的效果     二. 全部源代码就一行: skinEngine1.SkinFile = "WaveCo ...

随机推荐

  1. Spring中@Resource与@Autoware

    问题 这其实就是@Autoware与@Resource没有正确的使用,这个错误是因为wmPoiOplogService这个变量装配方式是@Resource,按照@Resource的按名字查找的方式,并 ...

  2. Nginx 反向代理、负载均衡、页面缓存、URL重写、读写分离及简单双机热备详解

    大纲 一.前言 二.环境准备 三.安装与配置Nginx  (windows下nginx安装.配置与使用) 四.Nginx之反向代理 五.Nginx之负载均衡  (负载均衡算法:nginx负载算法 up ...

  3. DDoS攻防战（一）：概述

    原文出处: 陶辉的博客   欢迎分享原创到伯乐头条 (此图摘自<Web脚本攻击与防御技术核心剖析>一书,作者:郝永清先生) DDoS,即 Distributed Denial of Ser ...

  4. 5、NFC概述

    什么是NFC NFC(Near Field Communication,近场通信),是一种数据传输技术.但与Wi-Fi.蓝牙.红外线等数据传输技术的一个主要差异就是有效距离一般不能超过4厘米. NFC ...

  5. 网页元素定位神器之Xpath详解

    摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ...     ...

  6. ansible命令执行模块使用

    ansible命令执行模块使用 1.命令执行模块-command 在远程节点上运行命令. 命令模块使用命令名称,接上空格-的分割符作为参数使用,但是不支持管道符和变量等,如果要使用这些,那么可以使用s ...

  7. Chapter13：拷贝控制

    拷贝控制操作:拷贝构造函数.拷贝赋值运算符.移动构造函数.移动赋值运算符.析构函数. 实现拷贝控制操作的最困难的地方是首先认识到什么时候需要定义这些操作. 拷贝构造函数: 如果一个构造函数的第一个参数 ...

  8. ACM2050前传

    n在一个平面上有一个圆和n条直线,这些直线中每一条在圆内 同其他直线相交,假设没有3条直线相交于一点,试问这些直线 将圆分成多少区域.   使用递归 F(1)=2; F(n) = F(n-1)+n; ...

  9. Eclipse或Myeclipse常用快捷键组合详解

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...

  10. phonegap 新窗口 WebView

    自定义WebView窗口打开 import com.ap.work.QuickWeb public class QuickPlugin extends CordovaPlugin { /** * 新开 ...