<!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. Linux/Unix shell 自动发送AWR report(二)

    观察Oracle数据库性能,Oracle自带的awr 功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.不过awrrpt.sql脚本执行时需要我们提供一些交互信 ...

  2. DevExpress控件GridView挂下拉控件无法对上值

    下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExp ...

  3. [偏微分方程教程习题参考解答]4.1Duhamel 原理

    1. 如果已知下述常微分方程的特定初值问题 $$\bex \sedd{\ba{ll} -y''+y=0,&x>0,\\ y(0)=0,\quad y'(0)=1 \ea} \eex$$ ...

  4. cocoa中获取时间

    头文件#import "Foundation/NSCalendarDate.h" + (id)calendarDate; - (int)yearOfCommonEra;- (int ...

  5. eclipse 编辑器的使用

    随着所编辑的文件数目的增加以及在这些文件之间的快速切换,一个又一个文件的编码以及对编辑器会话(session)的管理将会变得非常复杂.这时,有几件事情你是可以做的. 通过使用键盘快捷键,你可以快速选择 ...

  6. Connection failed: NT_STATUS_ACCOUNT_RESTRICTION

    今天在linux机器上想要远程重启一台window的机器,输入命令后报错,如下 Google了下,有说是window禁止远程空密码登录,于是到window系统中添加了密码,这下再运行 这下执行就正常了

  7. CSS中animate属性

    我记得,在工作中直接使用animation,只要能做出动画就完了,根本没有看每一个细节. 其实,这样做对于我们来说,的确没有错,因为工作中没有时间给你看每一个细节,大致看一篇就没下文了. 当我们想要好 ...

  8. 学习内容：Html5+Axure原型设计

    今日主要在http://www.runoob.com/html/html5-intro.html和http://www.imooc.com/learn/9网站上学习Html的知识,head.title ...

  9. 单源最短路径-Dijkstra算法

    1.算法标签 贪心 2.算法描述 具体的算法描述网上有好多,我觉得莫过于直接wiki,只说明一些我之前比较迷惑的. 对于Dijkstra算法,最重要的是维护以下几个数据结构: 顶点集合S : 表示已经 ...

  10. dom 关键字提示

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...