锋利的jQuery-5--网页换肤

网页换肤原理：通过调用不同的样式表文件来实现不同的皮肤，并且将切换好的皮肤计入cookie。

例子：通过点击上边的颜色设置下边显示的背景色。

html代码：

<!-- head部分引入的css样式,需要有个id属性，方便修改 --> 
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />  　　

<ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>     <!-- 此处设置的id名称正好是需要引入的css文件名，方便操作 -->
        <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>

 

js代码：

    <script src="../scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>  //引入jQuery.cookie.js插件
    <script type="text/javascript">

        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                switchSkin( this.id );   //this.id获取当前元素的id属性
            });
            var cookie_skin = $.cookie( "MyCssSkin");  //获取存入浏览器的cookie，如果cookie存在，则切换成cookie保存的val
            if (cookie_skin) {
                switchSkin( cookie_skin );
            }
        });
　　
　　　　/* 切换背景色的函数 */
        function switchSkin(skinName){
                 $("#"+skinName).addClass("selected")                 //当前<li>元素选中
                              .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
        }
        
    </script>