1.模态对话框

    模态对话框主要是通过改变表现的属性名来改变相应标签的显示性,以下给出完整的模态对话框的实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态对话框的实现</title>
    <style>
        .hide{
            display: none;
        }
        .cover{
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: black;
            /*设置透明度*/
            opacity: 0.5;
            z-index: 3;
        }
        .login{
            /*border: solid 1px;*/
            background-color: #d7ffe6;
            padding: 20px;
            position: absolute;
            left: 45%;
            top: 45%;
            z-index: 4;
        }
    </style>
</head>
<body>
    <input type="button" value="登录" onclick="show_dialog();">
    <!--遮盖罩开始-->
    <div  id="i1" class="cover hide"></div>
    <!--遮盖罩结束-->
    <!--登录对话框开始-->
    <div id="i2" class="login hide">
        <div>
            账号<input type="text">
        </div>
        <div>
            密码<input type="text">
        </div>
        <div>
            <input type="button" value="登录">
            <input type="button" value="取消" onclick="vanish_dialog();">
        </div>
    </div>
    <!--登录对话框结束-->
    <script>
        function show_dialog() {
            document.getElementById("i1").classList.remove('hide');
            document.getElementById("i2").classList.remove('hide');
//            var tag2 = document.getElementsByClassName("login");
//            tag2.classList.remove('hide');
//            不知道为什么通过classList.remove('hide')的语法会报错
        }
        function vanish_dialog() {
            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');
        }
    </script>
</body>
</html>


    2.隐藏二级菜单

    其实现原理与模态对话框并无两样,但其通过对JS函数设置参数的方式避免了相似功能函数的重写。以下给出完整的实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏二级菜单的实现</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div id="menu_1" onclick="show_menu('menu_1')">菜单一</div>
            <div class="hide">
                <div>项目一</div>
                <div>项目二</div>
                <div>项目三</div>
            </div>
        </div>
        <div>
            <div id="menu_2" onclick="show_menu('menu_2')">菜单二</div>
            <div class="hide">
                <div>项目一</div>
                <div>项目二</div>
                <div>项目三</div>
            </div>
        </div>
        <div>
            <div id="menu_3" onclick="show_menu('menu_3')">菜单三</div>
            <div class="hide">
                <div>项目一</div>
                <div>项目二</div>
                <div>项目三</div>
            </div>
        </div>
        <div>
            <div id="menu_4" onclick="show_menu('menu_4')">菜单四</div>
            <div class="hide">
                <div>项目一</div>
                <div>项目二</div>
                <div>项目三</div>
            </div>
        </div>
    </div>

    <script>
        function show_menu(menu) {
            menu_list = document.getElementById(menu).parentElement.parentElement.children;
//            console.log(menu_list)
//            console.log(12345)
            for(var i=0;i<menu_list.length;i++){
//                console.log(12345)
                var menu_div = menu_list[i];
                console.log(menu_div.children[1]);
                menu_div.children[1].classList.add("hide");
            }
            document.getElementById(menu).parentElement.children[1].classList.remove("hide");
        }
    </script>
</body>
</html>


    3.多选框

    主要是通过checked参数实现,以下给出具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框中反选的实现</title>
</head>
<body>
    <div id="multi_select">
        爱好:
        <input type="checkbox" name="hobby" value="swiming">游泳
        <input type="checkbox" name="hobby" value="pingpong">乒乓球
        <input type="checkbox" name="hobby" value="run">跑步
        <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="dance">跳舞
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="computer">计算机
    </div>
    <div>
        <input type="button" value="全选" onclick="every_check()">
        <input type="button" value="全弃" onclick="every_waive()">
        <input type="button" value="反选" onclick="reverse_check()">
    </div>
    <script type="text/javascript">
        function every_check() {
            var choice_list = document.getElementById("multi_select").children;
            for (var i=0;i<choice_list.length;i++){
//              checked表示复选框的选项状态,true为选中,false为未选中
                choice_list[i].checked = true;
            }
        }
        function every_waive() {
            var choice_list = document.getElementById("multi_select").children;
            for (var i=0;i<choice_list.length;i++){
//              checked表示复选框的选项状态,true为选中,false为未选中
                choice_list[i].checked = false;
            }
        }
        function reverse_check() {
            var choice_list = document.getElementById("multi_select").children;
            for (var i=0;i<choice_list.length;i++){
//              checked表示复选框的选项状态,true为选中,false为未选中
                if (choice_list[i].checked == true){
                    choice_list[i].checked = false;
                }else {
                    choice_list[i].checked = true;
                }
            }
        }
    </script>
</body>
</html>