<div class="buttons">
<button id="katong">卡通</button>
<button id="jian">简约</button>
<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属性改变
效果图如下：