<!DOCTYPE html>
<meta charset="utf-8"><head> <title>jquery实现页面皮肤切换并保存</title> <link title="green" rel="stylesheet" href="css/skin_0.css" id="cssfile"> <link title="blue" rel="stylesheet" href="css/skin_1.css" > <link title="red" rel="stylesheet" href="css/skin_2.css"> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery.cookie.js"></script> <style> .head{width:400px;}a{ display:inline-block; width:20px; height:20px; cursor:pointer;}a.skin_0{
background:red;}a.skin_1{ background:green;}a.skin_2{ background:orange;}.content{ width:500px; height:500px; margin-top:20px;} </style></head><body> <div class="head"> <a class="skin_0" id="skin_0" class="selected"></a> <a class="skin_1" id="skin_1"></a> <a class="skin_2" id="skin_2"></a> </div> <div class="content"> </div> </body><script>function changeColor(skinName){ $("#"+skinName).addClass('selected').siblings().removeClass('selected'); $("#cssfile").attr('href','css/'+skinName+'.css'); $.cookie('mySkin',skinName,{path:'/',expires:10});}$(function(){
var $a = $(".head a"); $a.click(function(){ var skinName= this.id; changeColor(skinName); }) var cookieSkin = $.cookie('mySkin'); if(cookieSkin){ changeColor(cookieSkin); } })</script></html>这个方法目前是我使用的简单粗暴的一种 当然有更多简单易懂的方法欢迎来探讨~