handWritingJS/tabOOP.html at master · ShuchenEason/handWritingJS · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            float: left;
        }

        main {
            width: 500px;
            margin: 100px auto;
        }

        .tabsbox .firstnav li {
            width: 100px;
            box-sizing: border-box;
        }

        .tabsbox .firstnav .li-active {
            border: 1px solid #000;
            border-bottom-color: #fff;
        }

        .tabscon section {
            box-sizing: border-box;
            margin-top: 1px;
            padding: 50px;
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            display: none;
        }

        .tabscon .con-active {
            display: block;
        }
    </style>
</head>

<body>
    <main>
        <h4>
            JS OOP tab
        </h4>
        <div class="tabsbox" id="tab">
            <nav class="firstnav">
                <ul>
                    <li class="li-active"><span>test1</span></li>
                    <li><span>test2</span></li>
                    <li><span>test3</span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>
            <div class="tabscon">
                <section class="con-active">test1</section>
                <section>test2</section>
                <section>test3</section>
            </div>
        </div>
    </main>
    <script>
        var that
        class Tab {
            constructor(id) {
                that = this
                this.main = document.querySelector(id)
                this.lis = this.main.querySelectorAll('li')
                this.sections = this.main.querySelectorAll('section')
                this.add = this.main.querySelector('.tabadd')
                this.ul = this.main.querySelector('.firstnav ul:first-child')
                this.init()
            }
            init() {
                this.add.onclick = this.addTab
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].index = i
                    this.lis[i].onclick = this.toggleTab
                }
            }
            clearClass() {
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].className = ''
                    this.sections[i].className = ''
                }
            }
            toggleTab() {
                that.clearClass()
                this.className = 'li-active'
                that.sections[this.index].className = 'con-active'
            }
            addTab() {
                var li = '<li class="li-active"><span>test1</span></li>'
                that.ul.insertAdjacentHTML('beforeend', li)
            }
            removeTab() {

            }
            editTab() {

            }
        }
        new Tab('#tab');
    </script>
</body>

</html>