jquery 用cookie进行换肤

 

进行换肤的前提就是必须写好几个css文件,要加载或下载jquery.cookie.js,同时要注意设置cookie的时候和读取cookie的时候是不一样的

=================================================代码===============================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
 <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    <!--   引入jQuery -->
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <!--   引入jQuery的cookie插件 -->
 <script src="js/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
  //<![CDATA[
  $(function(){
   var $li =$("#skin li");
   $li.click(function(){
    $("#"+this.id).addClass("selected")                //当前<li>元素选中
       .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
    $("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同皮肤
    $.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });
   });
   var cookie_skin = $.cookie( "MyCssSkin");
   if (cookie_skin) {
     $("#"+cookie_skin).addClass("selected")                //当前<li>元素选中
                 .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
     $("#cssfile").attr("href","css/"+ cookie_skin +".css"); //设置不同皮肤
     $.cookie( "MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });
   }
  })
  //]]>
 </script>
</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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值