javascript --- 一个菜单效果代码

最新推荐文章于 2023-09-14 08:50:39 发布
最新推荐文章于 2023-09-14 08:50:39 发布
阅读量880 收藏
点赞数
分类专栏： javaScript 文章标签： javascript border function table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinaphonelab/article/details/1488371
版权
<script language="javascript">
 var isOpen = false; //是否有层开着
 var oldid = 0   //表示调用seeMsg的前一个id,0代表第一次运行
 
  function seeMsg(id) {
 
      if (oldid == 0 ) oldid = id
      if (isOpen) {
       if (oldid != id) {
       document.getElementById(oldid).style.display = "none";
       document.getElementById(id).style.display = "block";
         oldid = id;
       }
       else {
       document.getElementById(id).style.display = "none";
       isOpen = false;
                }
   
     }
     else {
            document.getElementById(id).style.display = 'block';
       isOpen = true;
              }
}
 
 </script>
<body>
<a href="#" onClick="seeMsg('abc');">点击查看1</a><br /><br /><br />
 <div id="abc" style="display:none">
        <table width="100%" border="0" >
          <tr>
            <td bgcolor="#CCCCCC">显示详细内容1<a href="#" onClick="seeMsg('abc');">关闭</a></td>
          </tr>
   </table>
</div>
  <a href="#" onClick="seeMsg('a');">点击查看2</a>
 <div id="a" style="display:none">
        <table width="100%" border="0" >
          <tr>
            <td bgcolor="#33CC99">显示详细内容2<a href="#" onClick="seeMsg('a');">关闭</a></td>
          </tr>
        </table>
  </div> 

//--------------------------------------- <script language="javascript"> var isOpen = false; //是否有层开着 var oldid = 0 //表示调用seeMsg的前一个id,0代表第一次运行 function seeMsg(id) { if (oldid == 0 ) oldid = id if (isOpen) { if (oldid != id) { document.getElementById(oldid).style.display = "none"; document.getElementById(id).style.display = "block"; alert("关闭1"); oldid = id; } else { document.getElementById(id).style.display = "none"; isOpen = false; alert("关闭2"); } } else { document.getElementById(id).style.display = 'block'; isOpen = true; } } </script>
点击查看1


点击查看2
chinaPhoneLab
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用 JavaScript 构建带有下拉菜单的响应式导航栏
我的博客，不一样的自我表达
05-28 2895
aria-label带有 id 和汉堡包的按钮，aria-haspopup设置为“true”，aria-expanded设置为“false”。这些标签将使我们能够使屏幕阅读器更容易访问此按钮。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。这意味着当 dropdown1单击数据集为的按钮时，divid 为的元素dropdown1将记录到控制台，按钮则相反dropdown2。现在，只要下拉菜单可见，该aria-expanded属性就会设置为 true，而在折叠时，它会设置为 false。
用JavaScript制作菜单
zhj的博客
05-19 1135
用mouseover和mouseout代替css的hover功能 通过闭包和addEventListener设置鼠标mouseover和mouseout事件：循环执行函数(function(ind){})(i)来绑定每个菜单项的事件 for (var i = 0; i < y1.length; i++) { y1[i].addEventListener("mouseover"...
9个你会喜欢的 JavaScript 菜单实现方案
程序员成长指北
09-14 504
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群当你设计网站时，网站导航是一个非常重要的考虑因素。它是你网站中的主要元素，可能也是用户交互最多的元素。尽管我们可以通过 HTML 和 CSS 创建一个简单菜单，但结合JavaScript 可以帮助提高创造力并改善整体用户体验。JavaScript 菜单是让导航菜单脱颖而出的绝妙方式，添加的功能让一...
分享111个JS菜单导航，总有一款适合您
zy0412326的专栏
02-10 1381
js特效
06，JavaScript自定义菜单
bingliang514csdn的博客
11-19 332
06，JavaScript自定义菜单
javascript 树形导航菜单实例代码
u012231029的博客
03-01 148
树形导航菜单 "); }}function getIndex(el) { ind = null; for (I=0; I
JavaScript CSS创建右击菜单效果代码
12-12
css和javascript创建页面右键菜单 body { font-family: “宋体”; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-...
javascript 无限联动菜单效果代码
10-29
javascript 无限联动菜单效果代码，需要的朋友可以参考下。
JavaScript简单下拉菜单实例代码
10-23
主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
简单JavaScript菜单栏的扩展与隐藏
zuoxianshen的博客
10-30 1020
在这里插入代码片@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式
js Javascript递归构建菜单 展开式菜单的构建利用接口的数据
youtiankeng的博客
01-30 1897
js Javascript递归构建菜单 展开式菜单的构建利用接口的数据
javascript 树形菜单
03-24
NULL 博文链接：https://zhouhaitao.iteye.com/blog/1130278
javascript经典菜单案例（攘括了10多种经典菜单，包括QQ菜单及生成器）
12-03
各种经典js菜单任你选择，而且代码简洁！不要错过哦！快来挑选啊！
javascript菜单。。。。。。。。
12-14
javascript菜单。。。。。。纯学习目的
javascript 菜单
08-25
利用javascript写的十几个菜单，老外就是强
JavaScript 树形菜单
03-23
JavaScript 树形菜单JavaScript 树形菜单JavaScript 树形菜单
Javascript导航菜单13则
weixin_34167819的博客
12-19 142
来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html 翻译:http://parandroid.com下面为你准备了13个利用Javascript实现的网页导航菜单 1) Sexy Sliding Menu - 基于mootools的Javascript网页导航菜单，漂亮的滑动门技术，看到下面的图了没有，用它来设计你的...
JavaScript 版文章自动创建目录导航菜单控件源代码，用来生成文章导航，可生成独立的侧边栏导航菜单
Python代码大全
12-14 800
可选，用来指定是否在文章标题位置生成锚点链接图标：true - 生成锚点链接图标，并给标题添加 ID 属性，false - 不生成锚点链接图标，仅给标题添加 ID 属性。可选，用来指定文章导读导航菜单的显示位置：outside - 生成侧边栏菜单，inside - 直接在文章正文区域的开始位置生成导航菜单。可选，用来指定是否文章导读导航菜单是否显示文章段落层次的索引编号：true - 显示编号，false - 不显示编号。可选，用来指定 article 节点下，要生成导航的标题标签的选择器。
使用javascript生成级联菜单
m0_62297608的博客
12-05 373
使用javascript生成级联菜单 在做某些管理系统时，大多数情况都会用到级联菜单，可以对项目中的各个模块进行组织和管理，同时每个模块一般会有多个页面，所以针对这些情况就要生成指定功能的菜单了。下面是基于jQuery的简单的级联菜单。 html中的布局采用如下结构： <ul id="rootMenu"> <li> <div style="background: #0000FF;">新闻 </div>
用JavaScript写一个菜单页面
最新发布
09-26
最后，我们可以将JavaScript代码放置在页面的script标签中，并在页面加载完成后，调用一个初始化函数来执行上述步骤，以确保菜单的正确创建和功能。 通过上述步骤，我们就可以使用JavaScript 创建一个基本的菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值