<!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. hbase+hive应用场景

    一.Hive应用场景本文主要讲述使用 Hive 的实践,业务不是关键,简要介绍业务场景,本次的任务是对搜索日志数据进行统计分析.集团搜索刚上线不久,日志量并不大 .这些日志分布在 5 台前端机,按小时 ...

  2. cocos2d-x for android：SimpleGame分析

    cocos2d-x for android:SimpleGame分析 作为cocos2d-x的标配DEMO,SimpleGame可算是给入门学cocos2d-x的俺们这些新手门学习的对象了,那么来分析 ...

  3. ACE_SOCK

    该类属中的类都位于ACE_SOCK之下:它提供使用BSD socket编程接口的Internet域和UNIX域协议族的接口.这个类属中的类被进一步划分为: Dgram类, Acceptor类和Stre ...

  4. 常见排序算法基于JS的实现

    一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...

  5. eclipse 工程加入ant以支持自动打war包

    先在工程的根目录下建一个一builder.xml内容如下 <project basedir="." default="war" name="hb ...

  6. [Everyday Mathematics]20150223

    是否存在 $3\times 3$ 阶实方阵 $A$ 使得 $\tr A=0$ 且 $A^2+A^T=I$?

  7. 【转】为drupal初学者准备的12个精品课程

    下面是一些网上免费的drupal教程,这些教程将对初学者和那些从别的CMS转向drupal的开发者非常有帮助.初级教程 1.在开始用drupal之前,你要知道一些基本的东西,内容很简单,但有些还是值得 ...

  8. Name-based virtual servers 给予名称的虚拟服务

    nginx first decides which server should process the request. Let’s start with a simple configuration ...

  9. Java中实现异常处理的基础知识

    Java中实现异常处理的基础知识 异常 (Exception):发生于程序执行期间,表明出现了一个非法的运行状况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象. 例如:数组越界和被0除. ...

  10. asp.net mvc 使用Ajax

    使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src=&qu ...