锋利的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>