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
<div class="container">
    <nav class="nav">
        <div class="active">tap1</div>
        <div class="tap" data-type="0">tap1</div>
        <div class="tap" data-type="1">tap2</div>
        <div class="tap" data-type="2">tap3</div>
        <div class="tap" data-type="3">tap4</div>
    </nav>
    <div class="content">
        <div class="item">
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
            content1content1content1content1content1<br>
        </div>
        <div class="item">
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
            content2content2content2content2content2<br>
        </div>
        <div class="item">
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
            content3content3content3content3content3<br>
        </div>
        <div class="item">
            content4content4content4content4content4<br>
            content4content4content4content4content4<br>
            content4content4content4content4content4<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    
    

        

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

            content1content1content1content1content1

        
        

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

            content2content2content2content2content2

        
        

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

            content3content3content3content3content3

        
        

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

            content4content4content4content4content4

        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Number.prototype.toPercent = function() {
    return (Math.round(this * 10000) / 100).toFixed(2) + '%';
}
$(function() {
    $(".tap").click(function() {
        var type = parseInt($(this).attr("data-type"));
        var content = $(this).html();
        var newLeft = 0.25 * type;
        var contentLeft = type * 600 * -1 + "px";
        $(".content").css("left", contentLeft);
        $(".active").css("left", newLeft.toPercent());
        setTimeout(function() {
            $(".active").html(content);
        }, 250);
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX