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

    进行切换

一、HTML结构

     
      
    
       
红色
    
       
绿色
    
       
蓝色
      
      
    
       
首页
    
       
滚动
    
       
国际
    
       
社会
    
       
图片
    
       
视频
    
       
军事
    
       
历史
      
     

二、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样式：