表单,tab标签，自定义属性

表单实例

查看答案

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
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 13px;
    }
    table{
        text-align: center;
        margin: 100px auto;
        border-radius: 10px;
        overflow: hidden;
    }
    thead{
        background-color: #008dd0;
    }
</style>

<body>
    <table width="300px" border="1" cellspacing="0">
        <thead>
            <tr>
                <th><label for="all">全选<input type="checkbox" id="all"></label></th>
                <th>hello</th>
                <th>world</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>你好世界</td>
                <td>你好世界</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>你好世界</td>
                <td>你好世界</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>你好世界</td>
                <td>你好世界</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>你好世界</td>
                <td>你好世界</td>
            </tr>
        </tbody>

    </table>
    <script>
        var main = document.getElementById('all');
        var input = document.querySelector('tbody').getElementsByTagName('input');
        // 当点击全选按钮时，下方的选框同步
        main.onclick = function () {
            console.log(this.checked);
            for (var i = 0; i <= input.length - 1; i++) {
                input[i].checked = this.checked;
            }
        }
        // 当去除下方选框，或者全部将input选框点击或取消时，全选按钮同步发生改变
        for (var i = 0; i <= input.length - 1; i++) {
            input[i].onclick = function () {
                var flag = true;
                for (var i = 0; i <= input.length - 1; i++) {
                    if (!input[i].checked) {
                        flag = false;
                    }                   
                } 
                main.checked = flag;
            }
        }

    </script>

自定义属性

  1. 获取元素的属性
  2. element.属性/elemnet.getAttribute(‘属性’)
  3. 自定义属性使用get获取
  4. 设置元素值set
  5. 可以修改onclick为鼠标触碰onmouseover

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="demo" id="demo1" index="temp"></div>
<script>
    var div = document.querySelector('div');
    console.log(div.id);
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
    // 设置div的属性值，有两种方法，标签.属性/setAttribute('属性名')
    div.id = 'text1';
    console.log(div.id);
    div.className = 'text2';
    console.log(div.className);
    div.setAttribute('index',2);
    // 获取属性值可以使用两种方式，一种是标签.属性/getAttribute('属性名')
    console.log(div.getAttribute('index'));
    div.setAttribute('index','footer')
    console.log(div.getAttribute('index'));
</script>

移除属性

div.removeAtribute(‘index’);

tab标签

  1. 使用排他思想
  2. 使用自定义属性Attribute(‘属性名’，’属性值’)
  3. 使用自定义属性获取点击索引号

示例一

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
<style>
    * {
        margin: 0;
        padding: 0;

    }

    ul {
        list-style: none;
    }

    .tab {
        width: 500px;
        height: 300px;
        margin: 200px auto;
        border: 1px solid #888;
        border-bottom: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 1px 1px 3px #888;
    }

    .tab ul {
        display: inline-flex;
        width: 100%;
        align-items: center;
        background-color: #ccc;
        font-size: 13px;
    }

    .tab ul li {
        text-align: center;
        flex: 20%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #888;
        border-top: 0;
        border-left: 0;
        transition: all .6s;
    }
    .tab_con{
        width: 100%;
        height: 100%;
    }
    .item:nth-child(1){
        background:-webkit-linear-gradient(left,#8b48486c,#a2aa5579,#3655b99a);
    }
    .item:nth-child(2){
        background:-webkit-linear-gradient(left,#4f488b6c,#5599aa79,#b936829a);
    }
    .item:nth-child(3){
        background:-webkit-linear-gradient(left,#8b58486c,#7655aa79,#9db9369a);
    }
    .item:nth-child(4){
        background:-webkit-linear-gradient(left,#488b7a6c,#55aa9f79,#b9a1369a);
    }
    .item:nth-child(5){
        background:-webkit-linear-gradient(left,#48498b6c,#5577aa79,#36b9ae9a);
    }
    .tab ul li:hover {
        background-color: #12774d;
        color: white;
    }

    .item {
        display: none;
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="tab">
        <ul class="tab1">
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
        </ul>
        <div class="tab_con">
            <div class="item" style="display:block">Hello world1</div>
            <div class="item">Hello world2</div>
            <div class="item">Hello world3</div>
            <div class="item">Hello world4</div>
            <div class="item">Hello world5</div>
        </div>
    </div>
    <script>
        var lis = document.querySelector('.tab1').querySelectorAll('li');
        var items = document.querySelector('.tab_con').querySelectorAll('.item');
        for (var i = 0; i <= lis.length - 1; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                var index = this.getAttribute('index');
                console.log(index);
                for (var i = 0; i <= lis.length - 1; i++) {
                    items[i].style.display = 'none';
                } // 设置索引号
                items[index].style.display = 'block';
            }           
        }
    </script>

查看样式图例

示例二

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
<style>
    * {
        margin: 0;
        padding: 0;

    }

    ul {
        list-style: none;
    }

    .tab {
        width: 500px;
        height: 300px;
        margin: 200px auto;
        border-top: 1px solid #888;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 1px 1px 3px #888;
    }

    .tab ul {
        display: inline-flex;
        width: 100%;
        align-items: center;
        background-color: #ccc;
        font-size: 13px;
    }

    .tab ul li {
        text-align: center;
        flex: 20%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #888;
        border-top: 0;
        border-left: 0;
        transition: all .6s;
    }
    .tab_con{
        width: 100%;
        height: 100%;
    }
    .item:nth-child(1){
        background:-webkit-linear-gradient(left,#8b48486c,#a2aa5579,#3655b99a);
    }
    .item:nth-child(2){
        background:-webkit-linear-gradient(left,#4f488b6c,#5599aa79,#b936829a);
    }
    .item:nth-child(3){
        background:-webkit-linear-gradient(left,#8b58486c,#7655aa79,#9db9369a);
    }
    .item:nth-child(4){
        background:-webkit-linear-gradient(left,#488b7a6c,#55aa9f79,#b9a1369a);
    }
    .item:nth-child(5){
        background:-webkit-linear-gradient(left,#48498b6c,#5577aa79,#36b9ae9a);
    }
    .tab ul li:hover {
        background-color: #12774d;
        color: white;
    }

    .item {
        display: none;
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="tab">
        <ul class="tab1">
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
            <li>你好世界</li>
        </ul>
        <div class="tab_con">
            <div class="item" style="display:block">Hello world1</div>
            <div class="item">Hello world2</div>
            <div class="item">Hello world3</div>
            <div class="item">Hello world4</div>
            <div class="item">Hello world5</div>
        </div>
    </div>
    <script>
        var lis = document.querySelector('.tab1').querySelectorAll('li');
        var items = document.querySelector('.tab_con').querySelectorAll('.item');
        for (var i = 0; i <= lis.length - 1; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onmouseover = function () {
                var index = this.getAttribute('index');
                console.log(index);
                for (var i = 0; i <= lis.length - 1; i++) {
                    items[i].style.display = 'none';
                } // 设置索引号
                items[index].style.display = 'block';
            }           
        }
    </script>

查看样式图例