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>