当前位置：网站首页>JS select all and tab bar switching, simple comments

JS select all and tab bar switching, simple comments

2022-07-06 07:58:00 【MyDreamingCode】

 1. js Future generations 

<!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>
        table {
            margin: 100px auto;
        }
        thead {
            background-color: burlywood;
        }
        tbody {
            background-color: pink;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td> goods </td>
                <td> Price </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td> Teddy bear </td>
                <td>20</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td> Hamburger </td>
                <td>25</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td> game </td>
                <td>150</td>
            </tr>
        </tbody>
    </table>

    <script>
        var chooseAll = document.querySelector('thead').querySelector('input');
        var goodChoose = document.querySelector('tbody').querySelectorAll('input');
        chooseAll.onclick = function() {
            for(var i = 0; i < goodChoose.length; ++i) {
                goodChoose[i].checked = this.checked;
            }
        }
        for(var i = 0; i < goodChoose.length; i++) {
            goodChoose[i].onclick = function() {
                var flag = true;
                for(var j = 0; j < goodChoose.length; j++) {
                    if(!goodChoose[j].checked) {
                        flag = false;
                    }
                }
                chooseAll.checked = flag;
            }
        }
    </script>
</body>
</html>

2. Tab Bar Toggle 

<!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;
        }
        .wrap {
            width: 180px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .content {
            height: 100px;
            background-color: steelblue;
            border-top: 1px solid #000;
        }
        ul {
            list-style: none;
            cursor: pointer;
        }
        li {
            float: left;
            width: 60px;
            text-align: center;
            border-right: 1px solid #000;
            box-sizing: border-box;
        }
        li:last-child {
            border-right: 0;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .bg {
            background-color: tan;
        }
        .content div {
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top">
            <ul class="clearfix">
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
            </ul>
        </div>
        <div class="content">
            <div style="display: block;"> This is a tab1 The content of </div>
            <div> This is a tab2 The content of </div>
            <div> This is a tab3 The content of </div>
        </div>
    </div>

    <script>
        var lis = document.querySelectorAll('li');
        var divs = document.querySelector('.content').querySelectorAll('div');
        for(var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index',i);
            lis[i].onclick = function() {
                for(var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'bg';
                for(var k = 0; k < lis.length; k++) {
                    divs[k].style.display = 'none';
                }
                divs[this.dataset.index].style.display = 'block';
            }
        }
    </script>
</body>
</html>

3.  Simple comments 

<!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;
        }
        .wrap {
            width: 300px;
            margin: 100px auto;
        }
        ul {
            list-style: none;
        }
        li {
            border-bottom: 1px solid #ccc;
        }
        li a {
            float: right;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button> Release </button>
        <ul></ul>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        var txt = document.querySelector('textarea');
        btn.onclick = function() {
            if(txt.value == '') {
                alert(' Please enter the content ');
                return false;
            }else {
                var li = document.createElement('li');
                li.innerHTML = txt.value + "<a href='javascript:;'> Delete </a>";
                ul.insertBefore(li,ul.children[0]);
            }
            txt.value = '';

            var a = document.querySelectorAll('a');
            for(var i = 0; i < a.length; i++) {
                a[i].onclick = function() {
                    ul.removeChild(this.parentNode);
                }
            }   
        }
    </script> 
</body>
</html>

原网站

版权声明
本文为[MyDreamingCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202131850018445.html

边栏推荐

猜你喜欢

随机推荐