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

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

贴在这儿吧,修改一下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样式文件,可以的

推荐阅读