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

贴在这儿吧,修改一下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. 在Ubuntu下配置运行Hadoop2.4.0单节点配置

    还没有修改hosts,请先按前文修改. 还没安装java的,请按照前文配置. (1)增加用户并设立公钥: sudo addgroup hadoop sudo adduser --ingroup had ...

  2. MVC无刷新分页（即局部刷新，带搜索，页数选择，排序功能）

    我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...

  3. PHP基础知识之函数

    定义: <?phpclass foo-----定义类{    function do_foo()---类的方法    {        echo "Doing foo.";  ...

  4. bootstrap css总结

    base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级),pre(块级),.pre-scrollabl ...

  5. 【7集iCore3基础视频】7-7 Qt5.2.1安装

    Qt5.2.1安装包:http://pan.baidu.com/s/1dFbju0p 密码:yj8j 源视频:http://pan.baidu.com/s/1hsmEyyw 密码:8rm9

  6. canvas中的rotate的使用方法

    今天在绘制一个足球滚动的时候,想使用rotate方法,之前看到这个方法的时候,并没有引起任何重视,无非就是和CSS3里的rotate一样的用么... 遗憾的是,事实并非如此,由于代码在公司,我也就不去 ...

  7. Ubuntu apt-get "Hash Sum mismatch" 问题解决方法

    参考:ubuntu: apt-get update的时候遇到"Hash Sum mismatch"错误 在安装Mininet的时候,apt-get update的时候遇到了这个问题 ...

  8. laravel 获取 当前url 的方法， 有的是获取 全部url 有的只获取 主页其他 部分

    1. 使用 Request 类: $url = Request::getRequestUri(); 2. 使用 $request 对象: public function show(Request $r ...

  9. PHP 创建缩略图

    一.成比例缩小图像 <?php /* 创建缩略图 */ $file = __DIR__.'/button.png'; $scale = 0.5; // 比例 $image = ImageCrea ...

  10. mysql优化limit分页