比較具有參考性,代碼全貼(當然,還需要一張圖片需要的留個郵箱,看到就發)
貼在這兒吧,修改一下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~~
