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

贴在这儿吧,修改一下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. Java知识结构

  2. SpringMVC核心分发器DispatcherServlet分析[附带源码分析]

    目录 前言 DispatcherServlet初始化过程 DispatcherServlet处理请求过程 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不 ...

  3. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

  4. [LintCode] Majority Number 求众数

    Given an array of integers, the majority number is the number that occurs more than half of the size ...

  5. Unity3D连接sqlite数据库操作C#版

    unity3d有自己对应的sqlite.dll分别需要三个文件 1.Mono.Data.Sqlite.dll 在unity安装文件“Unity\Editor\Data\MonoBleedingEdge ...

  6. KVM 基本命令

    一.问题描述: KVM中宿主机通过console无法连接客户机,卡在这里不动了. # virsh console vm01 Connected to domain vm01 Escape charac ...

  7. Oracle EBS Setup

    1. Prevent close other forms after close original form

  8. PHPExcel中文开发手册翻译版(2)

    2016年8月18日12:45:14 请注意这个是粗翻译版,仅供参考,不是精校版 精校版后面才会更新 PHPExcel开发者文档 1.目录 2. 4先决条件 2.1.软件要求4 2.2.安装说明4 2 ...

  9. 总结-javascript

    是否可见 $('.btn-accomplish').is(':visible') 通过ajax提交时, {a: vA | ''}; vA没有时,服务器得到的a为"0".如果是两丨, ...

  10. 关于JavaScript的判断语句（2）

    上一篇描述的都是一些通过条件判断来执行,符合条件下面的代码块,达到对动作的反应效果 这篇将描述的是for. for/in. while. do/while循环语句. for语句: for(i=0,i& ...