<!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. Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)

    HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...

  2. 10、NFC技术：读写NFC标签中的文本数据

    代码实现过程如下: 读写NFC标签的纯文本数据.java import java.nio.charset.Charset; import java.util.Locale; import androi ...

  3. 部署WAR文件到tomcat

    1.启动tomcat服务 2.在浏览器的地址栏输入地址“http://localhost:8080/manager/html”进入tomcat管理界面. 如果要管理的服务器是在网络中,则将localh ...

  4. 为什么要Cssreset

    1.CssReset是什么?由于html标签在各浏览器的默认样式解析出来的有所不同.例如<ul>标签在IE.firefox.chrome浏览器下默认边距是不一样的.各浏览器的默认样,会给我 ...

  5. 指向函数的指针数组（C++)

    我们能够创建一个指向函数的指针数组.为了选择一个函数,只需要使用数组的下标,然后间接引用这个指针.这种方式支持表格式驱动码的概念:可以根据状态变量去选择被执行函数,而不用条件语句或case语句.这种设 ...

  6. CentOS安装中文输入法：ibus

    转自 http://gnucto.blog.51cto.com/3391516/935964 系统环境:Centos 6.3 编程语言:python + Bash 输入法:ibus 权限支持:root ...

  7. dedecms list 判断 每隔3次输出内容

    {dede:list pagesize='12' runphp='yes'} [field:global name=autoindex runphp="yes"](@me%3==0 ...

  8. NServiceBus-日志

    默认的日志 NServiceBus一些有限,固执己见,内置的日志记录. 默认的日��行为如下: 控制台 所有 Info(及以上)消息将被输送到当前的控制台. 错误将会写 ConsoleColor.Re ...

  9. Strassen算法

    如题,该算法是来自德国的牛逼的数学家strassen搞出来的,因为把n*n矩阵之间的乘法复杂度降低到n^(lg7)(lg的底是2),一开始想当然地认为朴素的做法是n^3,哪里还能有复杂度更低的做法,但 ...

  10. navigationController 之间的切换

    项目要实现从一个Navigation 下push出的第N层controller后 立即切换到另一个 Navigation下 例如:在微信的通讯录Nav中选择一个好友,进入好友的详细资料,点击发消息按钮 ...