<!DOCTYPE html>

<html>

<body>

<script>

function hideAll() {

  for(i=0;i<odiv.length;i++) {

    odiv[i].style.display="none";

  }

}

function showObj(num) {

  if (odiv[num].style.display=="none") {

    hideAll();

    odiv[num].style.display="inline";

  }

  else {

    odiv[num].style.display="none";

  }

}

</script>

<table>

  <tr >

    <td>

      <a href="#" onclick="showObj(0)">菜单一</a><br>

      <div id="odiv" style="display:none">l1<br>l2<br>l3</div>

    </td>

    </tr>

    <tr >

    <td>

      <a href="#" onclick="showObj(1)">菜单二</a><br>

      <div id="odiv" style="display:none">l11<br>l12<br>l13</div>

    </td>

    </tr>

    <tr >

    <td>

      <a href="#" onclick="showObj(2)">菜单三</a><br>

      <div id="odiv" style="display:none">l111<br>l112<br>l113</div>

    </td>

  </tr>

</table>

</body>

</html>
 
DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。

备注:
<table>代表表格</table> 
<tr>代表表格中的一行</tr> 
<td>代表表格中的一列</td>
'tr'与'td'交成一个单元格
<table>...</table>之间有多少个<tr>，就有多少行
<tr>...</tr>之间有多少个<td>，就有多少列

效果图：

javascript笔记09：javascript的下拉式导航菜单的更多相关文章

  1. 使用ActionBar实现下拉式导航

    ActionBar除可提供Tab导航支持之外,还提供了下拉式(DropDown)导航方式.下拉式导航的ActionBar在顶端生成下拉列表框,当用户单击某个列表项时,系统根据用户单击事件导航指定Fra ...

  2. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  3. AndroidUI组件之ActionBar--基于下拉的导航方式

      在上一篇关于ActionBar的博文中.我们知道了ActionBar是Android3.0的重要更新之中的一个.本篇博文就来写一个开发中经经常使用到的样例.用ActionBar提供基于下拉的导航方 ...

  4. 用JavaScript+css制作下拉式菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  6. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  7. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  8. (转载)一个用于Gnome桌面的下拉式终端： Guake 0.7.0 发布

    转自:https://linux.cn/article-5507-1.html Linux的命令行是最好.最强大的东西,它使新手着迷,并为老手和极客的提供极其强大的功能.那些在服务器和生产环境下工作的 ...

  9. 为下拉式菜单(DropDownList)添加第一个选项

    很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body>    <form id= ...

随机推荐

  1. tlplayer,wzplayer支持wince,winphone,windows8 for arm

    tlplayer,wzplayer宣布支持wince,winphone,windows8 for arm,支持http,hls,rtmp,rtsp,mms等媒体流协议. 支持加密视频播放. 目前tlp ...

  2. 做最好的自己(Be Your Personal Best)

    成功——做最好的自己 价值观——成功源于诚信 积极主动——成功的选择在于自己 同理心——人际交往的基础 自信——用信心放飞自我 自省——在反思中走向成功 勇气——勇往直前的精神 胸怀——海纳百川的境界 ...

  3. SpeeDO —— 并行深度学习系统

    SpeeDO —— 并行深度学习系统   摘要: 最近,AlphaGo又带起了一波深度学习的热潮.深度学习在很多领域都大幅提高了模型的精度,使得很多以前在实验室中的技术得以运用到日常的生活之中.然而, ...

  4. poj1141Brackets Sequence(dp+路径)

    链接 dp好想  根据它定义的 记忆化下就行 路径再dfs一遍 刚开始以为要判空格 所以加了判空格的代码 后来知道不用 .. #include <iostream> #include< ...

  5. hdu4293Groups

    http://acm.hdu.edu.cn/showproblem.php?pid=4293 这题单拉出来写篇吧 确实不错的一题 将每个人说的话 转化一下 可以算出它处在哪个段中 题目就转换成了求不相 ...

  6. Configurataion Printer（基于全新2.2.0API）

    Configurataion Printer import java.util.Map.Entry; import org.apache.hadoop.conf.Configuration; impo ...

  7. BZOJ 2588: Spoj 10628. Count on a tree 主席树+lca

    分析:树上第k小,然后我想说的是主席树并不局限于线性表 详细分析请看http://www.cnblogs.com/rausen/p/4006116.html,讲的很好, 然后因为这个熟悉了主席树,真是 ...

  8. [转]用C#实现的条形码和二维码编码解码器

    条形码的标准: 条形码的标准有ENA条形码.UPC条形码.二五条形码.交叉二五条形码.库德巴条形码.三九条形码和128条形码等,而商品上最常使用的就是EAN商品条形码.EAN商品条形码亦称通用商品条形 ...

  9. 分享form表单提交问题

    前段时间做了一个form表单传值问题  当时觉得form表单的submit不就是提交form表单name的value值吗 ? 其实是对的  但是我做的是一个打印页面  需要把当前页面的元素传入下一个u ...

  10. poj 2528 线段树 离散化的小技巧

    题意:在墙上贴海报,海报可以互相覆盖,问最后可以看见几张海报思路:直接搞超时+超内存,需要离散化.离散化简单的来说就是只取我们需要的值来 用,比如说区间[1000,2000],[1990,2012] ...