下拉菜单控制层的显示与隐藏

最新推荐文章于 2026-02-06 05:14:36 发布
原创 最新推荐文章于 2026-02-06 05:14:36 发布 · 1.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一个简单的HTML页面示例，通过JavaScript实现了下拉菜单中选项变化时对应内容层的动态显示与隐藏。该示例使用了HTML、CSS和JavaScript三种基本前端技术，展示了如何通过事件监听来改变DOM元素的样式属性。

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">

<html>
<head>
<meta   http-equiv="pragma"   content="no-cache">
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<title> 新建网页 </title>
<style   type="text/css">
#mylayer   div{
display:none;
}
</style>
</head>
<body>
<select   id="sel"   onchange="f(this);">
<option> a </option>
<option> b </option>
<option> c </option>
<option> d </option>
</select>
<div   id="mylayer">
<div   style="display:block;"> 层1 </div>
<div> 层2 </div>
<div> 层3 </div>
<div> 层4 </div>
</div>
<script   language="javascript">
function   f(obj){
var   mylayers   =   document.getElementById("mylayer").getElementsByTagName("DIV");

for(var   i=0;   i <mylayers.length;   i++){
mylayers[i].style.display   =   "none";
}
mylayers[obj.selectedIndex].style.display   =   "block";
}
</script>
</body>
 

标签
#div #html #javascript #function #c
cqinter
关注
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。 那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()
菜单的隐藏和显示
07-30
jQuery下拉菜单 的显示和隐藏
若依笔记（三）：用户权限体系与数据隔离
叶子叶来
11-02 6098
​ 已知若依单体的前端采用vue-element-admin，在前端的专栏系列vue-element-admin的动态路由已详细拆解，其最大特点是使用后端返回数据控制前端菜单，每次接口请求前会有路由拦截来获取权限和菜单列表并重新渲染页面，配合若依后端自己实现的数据权限切面，能够实现很好地的数据隔离和权限隔离，那么现在就从代码层面分析其实现； ​
若依分离版（Oracle）前端根据用户角色显示隐藏
wuzushun的博客
01-31 1239
显示隐藏特定表格列可以通过使用 v-if 或 v-show 指令来实现，难点是拿到登录用户信息，不过若依已经有写有了，我们只要调用一下啪的一下就能实现了
若依框架的前端菜单组件如何实现权限控制？
alankuo的专栏
09-28 1111
在后端（如基于Java的若依框架服务端）数据库中，存在角色表（如 sys_role ）和菜单表（如 sys_menu ），通过中间表（如 sys_role_menu ）建立角色与菜单的多对多关联关系。将查询结果转换为前端可识别的格式（如JSON），其中包含菜单的标识（如菜单ID）以及权限状态（如可访问或不可访问）等信息。例如，如果某个菜单的权限为不可访问，在前端将该菜单节点隐藏。- 当用户角色发生变化（如角色切换）时，重新获取权限数据，并重新渲染菜单组件，以确保菜单和操作按钮的权限状态与新角色相匹配。
div控制
jiefang2的博客
03-23 537
div控制元素位置（按钮、图片、form） <%-- //div position参数设置为fixed 其相对于浏览器为绝对位置，通过设置right和top将div固定在右上角。--%> 第一种，控制一个下载按钮 <div id="dg" style="z-index: 9999; position: fixed ! important; left: 80px;top: 180px;"> <input id="exportBtn" type="submit"
关于layui使用 对左侧的垂直导航栏的隐藏和显示（参考）
GinChou的萌新博客
05-25 8336
参考链接如下： https://www.kanzhun.com/jiaocheng/146295.html 我需要在头部文件中实现展示和隐藏的需求 html代码如下: <!-- web、移动端显示 --> <li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft"> <a href="javascript
JAVASCRIPT控制层的显示和隐藏
weixin_30699465的博客
07-28 86
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function showhide(flag){ if(flag==...
html ap div,第10讲 网页布局元素：Ap DIV.ppt
weixin_30748871的博客
06-18 2787
第10讲 网页布局元素：Ap DIV嵌套的含义：嵌套并不表示一个AP DIV元素在另外一个AP DIV元素里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。 嵌套在内的为子层，嵌套层外部的层称为父层。 三、AP DIV元素的嵌套 AP层对象元素的嵌套方法 第一步：将光标定位在要插入嵌套AP元素的父层内。第二步：拖动布局选项卡中的“绘制AP Div”到AP父层内。 嵌套的重要特点 子层可...
解锁10个隐藏显卡性能开关：NVIDIA Profile Inspector深度优化指南
gitblog_00441的博客
01-23 1019
经过30+设备测试发现，NVIDIA Profile Inspector能释放显卡15-25%的潜在性能，尤其在老旧硬件上效果显著。这款工具通过直接访问驱动底层配置，突破了官方控制面板的功能限制，让普通用户也能获得专业级的显卡调校能力。 ### 三大核心优势 - **参数深度**：提供200+项隐藏设置，是官方面板的3倍以上 - **场景适配**：为不同游戏/应用创建独立优化方案 - **资源控
终极指南：Krita AI插件图像生成成本优化的7个实用技巧
最新发布
gitblog_07055的博客
02-06 477
Krita AI Diffusion插件为艺术家提供了在Krita中无缝集成AI图像生成的强大功能，但高分辨率和复杂模型可能导致生成时间过长和资源消耗过高。本文将分享7个经过验证的优化技巧，帮助你在保持图像质量的同时，显著降低生成成本和时间开销。 ## 一、分辨率设置：平衡质量与性能的黄金法则 分辨率是影响生成成本的核心因素，过高的分辨率会直接导致GPU内存占用和生成时间呈指数级增长。通过合理
CSS如何控制DIV层实现显示和隐藏
hdxx2022的博客
08-02 689
隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。所以display和visibility控制的分别是html元素是否存在和是否显示，display的属性定义该元素存在或不存在，而visibility的属性只是控制该元素是否显示出来，实际上还是存在的。显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧。
layer 下拉树形菜单带有复选框
05-22
该插件是改良的layer的树形插件，在原始的layer插件中的树形结构是没有复选框的，改良后可用以拿来做权限系统的权限选择
jQuery设置下拉框显示与隐藏效果的方法分析
12-29
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法。分享给大家供大家参考，具体如下： jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素，而 toggle() 方法则可以切换 hide() 和 show() 方法，也就是显示被隐藏的元素，并隐藏已显示的元素。 $(select).hide(); // 隐藏下拉框 $(select).show(); // 显示下拉框 $(select).toggle(); // 如果下拉框是显示的则隐藏之，反之亦然 示例代码如下 1. 创建Html元素 <div class=box> <
左边栏菜单隐藏显示
05-31
bootstrap左边菜单栏隐藏显示，非常亮眼，前端框架优秀的设计
layui隐藏侧边栏_【Layui】侧边菜单导航禁用折叠、去除箭头样式
weixin_32226023的博客
01-14 4655
官方提供的样式代码：默认展开选项1选项2跳转解决方案移动模块后台模版电商平台产品大数据解决办法：.layui-nav-item a{background-color: #4E5465;color: #ffffff;}.layui-nav-item .layui-nav-child a{background-color: #333333;color: #ffffff;}/*禁用左侧菜单的箭头*/bo...
简单的左侧菜单栏整个菜单栏隐藏收起功能
热门推荐
lan_学习分享
04-12 1万+
百度搜了一下，基本都是上下收缩二级菜单这些的，但是需求是要整个菜单栏都隐藏收起，只能自己弄了，如果不是要这个功能的就别看了，先上效果图（顺便晒晒我家的荷兰猪~~~） 左侧菜单栏未收起 点击左上的左箭头按钮，左侧菜单收起，有动画效果的，这里只展示结果，具体可以复制代码自己看 效果描述： 1、向左侧慢慢收起，历时500ms，展开也历时500ms 2、左下方有个放视频的地方，鼠标移...
控制div属性
qq_44254672的博客
05-23 934
<!DOCTYPE html> <html> <head> <title>控制div属性</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #app1{ wid...
JavaScript HTML CSS显示隐藏二级菜单（下拉菜单）
qq_44829011的博客
05-15 8644
一级菜单效果如图一所示 按键选项一 至 选项四是一级菜单 当点击选项一时 弹出二级菜单 效果如图二所示（其余一级菜单也有对应的二级菜单） html构造 <body> <div> <ul id='ul_0'> <li><a οnclick="javascript:Foo(); return false;" href="#">二级菜单</a> </li> <li
选择下拉菜单显示和隐藏的实现
weixin_30888027的博客
09-27 938
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .menu:hover .menucontent{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值