列表切换构思

1.设置html

<div   id=大的div>

<div   列表div>

<ul>

<li 图片1></li>

<li  图片2></li>

</ul>

</div>

<div  内容div>

<ul  id=" ul 的id">

<li    class="列表1"></li>

<li  ></li>

.

.

.

</ul>

<div>

<div>

2.设置图片显示在浏览器内容的不同

如：

<li class="list-1" id="list-1" style="background-position:0px -26px ;"></li>  
<li class="list-2" id="list-2" style="background-position:-30px -26px ;"></li>

3. 设置

设置内容列表1的css和列表2的css

. 列表1的id  {

}

. 列表2的id  {

}

4.写jquery

//

$(document).ready(function(){
$(".list-1").bind("click",function(){

//显示一开始时的内容
$(".list-1").css("backgroundPosition","0px -26px");        //未点击时图片显示的内容
$(".list-2").css("backgroundPosition","-30px -26px");
$(".ul的id").children().removeClass("列表2的id").addClass("列表1的id");

})

//显示点击时的内容
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");        //点击时图片显示的内容
$(".list-2").css("backgroundPosition","-30px 0px")
$(".ul的id").children().removeClass("列表1的id").addClass("列表2的id");
})
});

2017-09-15  08:59:24