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>