列表切换构思

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