首页 > 代码库 > 利用jq并且添加上cookie的网页换肤
利用jq并且添加上cookie的网页换肤
<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>
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.cssh1{ background:#999999;}skin_1.cssh1{ background:#BB3BD9;}skin_2.cssh1{ background:#E31559;}skin_3.cssh1{ background:#08BECE;}skin_4.cssh1{ background:#FBA60A;}skin_5.cssh1{ background:#AFD400;}
<script src="http://www.mamicode.com/scripts/jquery-1.3.1.js" type="text/javascript"></script><script src="http://www.mamicode.com/js/jquery.cookie.js" type="text/javascript"></script>//cookie.js插件在前几篇博客里已经提到过，或者百度都可以查到。<script type="text/javascript">$(function(){ $("#skin li").click(function(){ $("#"+this.id).addClass("selected").siblings().removeClass("selected");//当前<li>元素被选中 $("#cssfile").attr("href","css/"+(this.id)+".css");//设置不同皮肤 $.cookie( "MyCssSkin" , this.id , { path: ‘/‘, expires: 10 });//计入cookie }); var cookie_skin=$.cookie("MyCssSkin"); if(cookie_skin){ $("#"+cookie_skin).addClass("selected").siblings().removeClass("selected"); $("#cssfile").attr("href","css/"+cookie_skin+".css"); $.cookie( "MyCssSkin" , cookie_skin , { path: ‘/‘, expires: 10 }); }});</script >
利用jq并且添加上cookie的网页换肤
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。