比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发)

贴在这儿吧,修改一下css的引用位置应该可以用

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>

<script src="<%=request.getContextPath()%>/js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery</title>

<link href="<%=request.getContextPath()%>/js/default.css" rel="stylesheet" type="text/css" />

<link href="<%=request.getContextPath()%>/js/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

</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;
}

skin_2.css

h1{
background:#E31559;
}

skin_3.css

h1{
background:#08BECE;
}

skin_4.css

h1{
background:#FBA60A;
}

skin_5.css

h1{
background:#AFD400;
}

jqr.js

$(function(){

    //先从cookie 中取判断有无

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

    if(cookie_skin){

        switchSkin(cookie_skin)

    }

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

    $li.click(function(){

        switchSkin(this.id);

    })

    function switchSkin(skinName){

        $("#"+skinName).addClass("selected").siblings().removeClass("selected");

        //这算动态调用css文件,可以的,个人感觉用css特殊规则命名也可以替换,留待后续

        $("#cssfile").attr("href",skinName+".css");

        //jquery.cookie 存放

        $.cookie("myCssSkin",skinName,{path:'/',expires:10});

    }

});

实现的结果:

refresh~~

jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的的更多相关文章

  1. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  2. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  3. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  4. JavaScript网页换肤

    使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...

  5. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  6. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  7. 网页换肤,模块换肤,jQuery的Cookie插件使用（转）

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  8. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  9. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

随机推荐

  1. 【BZOJ1180】: [CROATIAN2009]OTOCI & 2843: 极地旅行社 LCT

    竟然卡了我....忘记在push_down先下传父亲的信息了....还有splay里for():卡了我10min,但是双倍经验还是挺爽的,什么都不用改. 感觉做的全是模板题,太水啦,不能这么水了... ...

  2. 【JAVA】JDK -Calendar 遇到的 一个坑

    Calendar是JDK 1.1增加的类 最近使用了下Calendar发现几个很让人抓狂的问题 源码: public final static int SUNDAY = 1; public final ...

  3. Reg于Wire的不同点

    Reg 比喻为“相机” Reg型,是always中被赋值的信号,往往代表触发器,但不一定是触发器 Wire 比喻为“镜子” Wrie型,assign指定的组合逻辑的信号 好好想想 ,还是能有个大致的概 ...

  4. Spring-Aop入门

    (一)Aop术语定义 1.通知(advice) 通知定义了切面要做什么工作,即调用的方法,同时定义了什么时候做这些工作,即以下五种类型 (1)前置通知(Before) :在目标方法调用之前执行切面方法 ...

  5. requirejs：研究笔记

    模块化历史 模块化异步加载方式 后期维护 查找问题 复用代码 防止全局变量的污染 http://requirejs.cn/ http://requirejs.org/ 我的目录结构 总体步骤 < ...

  6. ThinkPHP 3.2.3 加减乘法验证码类

    ThinkPHP 3.2.3 自带的验证码类位于 /ThinkPHP/Library/Think/Verify.class.php,字体文件位于 /ThinkPHP/Library/Think/Ver ...

  7. Clock rate

    https://en.wikipedia.org/wiki/Clock_rate The clock rate typically refers to the frequency at which a ...

  8. Linq读取XML

    var customerList = ( from e in XDocument.Load("customers.xml"). Root.Elements("custom ...

  9. 给Source Insight做个外挂系列之三－－构建外挂软件的定制代码框架

    上一篇文章介绍了“TabSiPlus”是如何进行代码注入的,本篇将介绍如何构建一个外挂软件最重要的部分,也就是为其扩展功能的定制代码.本文前面提到过,由于windows进程管理的限制,扩展代码必须以动 ...

  10. js中的 || && !!

    a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回aa || b : 将a, b转换为Boolean类型, 再执行逻辑或, tru ...