<!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. vm虚拟机挂载usb

    首先得保证能在VM里看到usb设备,如图

  2. HDFS命令行文件操作

    Hadoop文件操作命令形式为 hadoop fs -cmd <args> 说明:cmd是具体的文件操作命令,<args>是一组数目可变的参数. Hadoop最常用的文件操作命 ...

  3. 表单Ext.form.FormPanel(转)

    1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...

  4. Intent(意图)

    Intent的中文意思是“意图,目的”的意思,可以理解为不同组件之间通信的“媒介”或者“信使”. 目标组件一般要通过Intent来声明自己的条件,一般通过组件中的<intent-filter&g ...

  5. 开发者必须知道的HTML5十五大新特性

    HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型  ( ...

  6. java多态中哪些成员具备多态特性

    在多态的学习中,当子类继承父类时,子类中的变量哪些具备多态特性,哪些不具备多特特性. 代码: class Father{ public static int x=10; public int y=11 ...

  7. SPF详解2

    什么是SPF?   这里的SPF不是防晒指数,而是指Sender Policy Framework.翻译过来就是发信者策略架构,比较拗口,通常都直接称为SPF.   SPF是跟DNS相关的一项技术,它 ...

  8. 【LeetCode 236】Lowest Common Ancestor of a Binary Tree

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  9. [转]Linux下which、whereis、locate、find 命令的区别

    转自:http://312788172.iteye.com/blog/730280 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有 ...

  10. PHPSTORM 与 Xdebug 配合调试

    基本的配置可以参考网上的文档, 浏览器中装插件(xdebug)或直接在请求中加上如下的参数也可启动调试 ?XDEBUG_SESSION_START=PHPSTORM