1.2 网页换肤

中心主题：通过点击按钮对网页的样式进行切换，主要是控制<link>的href属性--

<link href="green.css" rel="stylesheet" type="text/css">进行切换

一、HTML结构

<div>
<ul id="changeSkin">
    <li id="red" title="红色">红色</li>
    <li id="green" title="绿色" class="current">绿色</li>
    <li id="blue" title="蓝色">蓝色</li>
</ul>
<ul id="contList">
    <li><a href="#">首页</a></li>
    <li><a href="#">滚动</a></li>
    <li><a href="#">国际</a></li>
    <li><a href="#">社会</a></li>
    <li><a href="#">图片</a></li>
    <li><a href="#">视频</a></li>
    <li><a href="#">军事</a></li>
    <li><a href="#">历史</a></li>
</ul>
</div>

二、css样式

  body{
            margin:0px;
            padding:0px;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            margin:0px auto;
        }
    #changeSkin{
        float: left;
        width:100%;
        overflow: hidden;
        zoom:1;
        margin:10px 0;
    }
        #changeSkin>li{
            float: left;
            list-style-type: none;
            text-indent:-9999px;
            border-width:4px;
            border-style:solid;
            width:10px;
            height:10px;
            margin-left:10px;
            margin-right:10px;
        }
        #red{
            border-color: red;
            background-color: red;
        }
        #green{
            border-color: lightseagreen;
            background-color: lightseagreen;
        }
        #blue{
            border-color: blue;
            background-color: blue;
        }
        .current{
            background-color: white!important;
        }
        #contList{
            float: left;
            width:100%;
        }
        #contList li{
            list-style-type: none;
            float: left;
            width:25%;
            margin-top:10px;
            color: #000;
        }
        #contList li a{
            color: #ffffff;
        }

引入的外部文件样式：

1.blue.css

 

 body{

    font-weight:bold;">blue;
}

2.green.css

body{
    font-weight:bold;">green;
}

3.red.css

body{
    font-weight:bold;">red;
}

三、jquery文件

  $(document).ready(function(){
        var $skin=$("#changeSkin li");
        var $link=$("link");
        $skin.click(function(){
            $(this).addClass("current");
            $skin.not(this).removeClass("current");
            var $id=$(this).attr("id");
            $link.attr("href",$id+".css");
        });
    });

 

 四、最终结果

blue样式：

green样式：

red样式：