整理今天js留下的作业（点击换图片换首页背景图）

 <div class="buttons">
         <button id="katong">卡通</button>&nbsp;&nbsp;&nbsp;
         <button id="jian">简约</button>&nbsp;&nbsp;&nbsp;
         <button id="gufeng">古风</button>
         </div>
         <ul class="1">
             <li id="first"><img src="img/0/thumb/1.jpg"></li>
             <li id="second"><img src="img/0/thumb/2.jpg"></li>
         </ul>
         <ul class="2">
             <li id="first"><img src="img/1/thumb/1.jpg"></li>
             <li id="second"><img src="img/1/thumb/2.jpg"></li>
         </ul>
         <ul class="3">
             <li id="first"><img src="img/2/thumb/1.jpg"></li>
         </ul>

样式如下

 <style>
             ul li{
                 list-style: none;
                 padding-left: 700px;
             }

             .buttons{
                 text-align: center;
             }

             #katong,#gufeng,#jian{
                 font-size: 20px;
                 border: solid 2px blue;
                 color: red;
                 background-color: pink;
             }
         </style>

js

 <script>
             $("ul li").hide();
             $("#katong").click(function(){
                 $(".1 li").toggle();
             });
             $("#jian").click(function(){
                 $(".2 li").toggle();
             });
             $("#gufeng").click(function(){
                 $(".3 li").toggle();
             });

             $(".1 #first img").click(function(){
                 $("body").css("background-image","url(img/0/theme/1.jpg)");
             });
             $(".1 #second img").click(function(){
                 $("body").css("background-image","url(img/0/theme/2.jpg)");
             });
             $(".2 #first img").click(function(){
                 $("body").css("background-image","url(img/1/theme/1.jpg)");
             });
             $(".2 #second img").click(function(){
                 $("body").css("background-image","url(img/1/theme/2.jpg)");
             });
             $(".3 #first img").click(function(){
                 $("body").css("background-image","url(img/2/theme/1.jpg)");
             });

         </script>

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素

即点击按钮则显示对应的ul li中的元素（缩略图），再次点击则消失

也可以使用hide和show方法去实现缩略图的出现和隐藏

背景图即使用.css属性改变

效果图如下：