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

 1 <div class="buttons">
 2         <button id="katong">卡通</button>&nbsp;&nbsp;&nbsp;
 3         <button id="jian">简约</button>&nbsp;&nbsp;&nbsp;
 4         <button id="gufeng">古风</button>
 5         </div>
 6         <ul class="1">
 7             <li id="first"><img src="img/0/thumb/1.jpg"></li>
 8             <li id="second"><img src="img/0/thumb/2.jpg"></li>
 9         </ul>
10         <ul class="2">
11             <li id="first"><img src="img/1/thumb/1.jpg"></li>
12             <li id="second"><img src="img/1/thumb/2.jpg"></li>
13         </ul>
14         <ul class="3">
15             <li id="first"><img src="img/2/thumb/1.jpg"></li>
16         </ul>

样式如下

 1 <style>
 2             ul li{
 3                 list-style: none;
 4                 padding-left: 700px;
 5             }
 6             
 7             .buttons{
 8                 text-align: center;
 9             }
10             
11             #katong,#gufeng,#jian{
12                 font-size: 20px;
13                 border: solid 2px blue;
14                 color: red;
15                 background-color: pink;
16             }
17         </style>

js

 1 <script>
 2             $("ul li").hide();
 3             $("#katong").click(function(){
 4                 $(".1 li").toggle();
 5             });
 6             $("#jian").click(function(){
 7                 $(".2 li").toggle();
 8             });
 9             $("#gufeng").click(function(){
10                 $(".3 li").toggle();
11             });
12             
13             $(".1 #first img").click(function(){
14                 $("body").css("background-image","url(img/0/theme/1.jpg)");
15             });
16             $(".1 #second img").click(function(){
17                 $("body").css("background-image","url(img/0/theme/2.jpg)");
18             });
19             $(".2 #first img").click(function(){
20                 $("body").css("background-image","url(img/1/theme/1.jpg)");
21             });
22             $(".2 #second img").click(function(){
23                 $("body").css("background-image","url(img/1/theme/2.jpg)");
24             });
25             $(".3 #first img").click(function(){
26                 $("body").css("background-image","url(img/2/theme/1.jpg)");
27             });
28             
29         </script>

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

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

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

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

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


效果图如下：

 

posted @ 2020-05-12 10:39  努力学习的Peanut  阅读(280)  评论(0)    收藏  举报