1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <h3>点击列表显示图片</h3>
    <h3>图片可拖拽可缩放</h3>
    <div id="container"></div>
    <div class="imgblock">
        <div class="left">
            <div class="list list4" data-item="4">第一级list1</div>
            <div class="list list1" data-item="1">第一级list2</div>
            <div class="list list2" data-item="2">第一级list3</div>
            <div class="list list3" data-item="3">第一级list4</div>
        </div>
        <div class="right">
            <div class="rb rb4">
                <div class="rblist rb4list1" data-item="rb4list1">第二级list1_1</div>
            </div>
            <div class="rb rb1">
                <div class="rblist rb1list1" data-item="rb1list1">第二级list2_1</div>
                <div class="rblist rb1list2" data-item="rb1list2">第二级list2_2</div>
            </div>
            <div class="rb rb2">
                <div class="rblist rb2list1" data-item="rb2list1">第二级list3_1</div>
                <div class="rblist rb2list2" data-item="rb2list2">第二级list3_2</div>
            </div>
            <div class="rb rb3">
                <div class="rblist rb3list1" data-item="rb3list1">第二级list4_1</div>
                <div class="rblist rb3list2" data-item="rb3list2">第二级list4_2</div>
            </div>
        </div>
    </div>
    <img alt="" src="http://www.jq22.com/img/cs/500x300-1.png" class="imgfloat">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    
点击列表显示图片
    
图片可拖拽可缩放
    

    

        

            
第一级list1
            
第一级list2
            
第一级list3
            
第一级list4
        
        

            

                
第二级list1_1
            
            

                
第二级list2_1
                
第二级list2_2
            
            

                
第二级list3_1
                
第二级list3_2
            
            

                
第二级list4_1
                
第二级list4_2
            
        
    
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var src = "";
//点击事件们
$(".list").css("background", "rgba(255,255,255,0.5)");
$(".rblist").css("background", "rgba(255,255,255,0.5)");
//默认概况list被选中，背景色突出显示
$(".list4").css("background", "rgba(255,255,255,0.3)");
$(".rb").hide();
$(".rb4").show();
//点击list
$(".list").click(function() {
    $(".list").css("background", "rgba(255,255,255,0.5)");
    $(this).css("background", "rgba(255,255,255,0.3)");
    if ($(this).attr("data-item") == "1") {
        $(".rb").hide();
        $(".rb1").show();
    } else if ($(this).attr("data-item") == "2") {
        $(".rb").hide();
        $(".rb2").show();
    } else if ($(this).attr("data-item") == "3") {
        $(".rb").hide();
        $(".rb3").show();
    } else if ($(this).attr("data-item") == "4") {
        $(".rb").hide();
        $(".rb4").show();
    }
});
$(".rblist ").click(function() {
    $(".rblist").css("background", "rgba(255,255,255,0.5)");
    $(this).css("background", "rgba(255,255,255,0.3)");
    $(".imgfloat").show()
    if ($(this).attr("data-item") == "rb1list1") {
        $(".imgfloat").attr("src", "http://www.jq22.com/img/cs/500x300-1.png")
    } else if ($(this).attr("data-item") == "rb1list2") {
        $(".imgfloat").attr("src", "http://www.jq22.com/img/cs/500x300-2.png")
    } else if ($(this).attr("data-item") == "rb2list1") {
        $(".imgfloat").attr("src", "http://www.jq22.com/img/cs/500x300-3.png")
    } else if ($(this).attr("data-item") == "rb2list2") {
        $(".imgfloat").attr("src", "http://www.jq22.com/img/cs/500x300-4.png")
    } else if ($(this).attr("data-item") == "rb3list1") {
        $(".imgfloat").attr("src", "http://www.jq22.com/img/cs/500x300-5.png")
    } else if ($(this).attr("data-item") == "rb3list2") {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX