<!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. Android开发之注解式框架ButterKnife在ADT中的设置

    使用注解式框架ButterKnife的时候,导入到ADT中,结果项目中注解的view无效,如点击button等无任何的反应. 然后在ButterKnife的官网查看到解决办法:http://jakew ...

  2. 一类最小割bzoj2127，bzoj2132 bzoj3438

    思考一下我们接触的最小割问题 最小割的基本问题(可能会和图论的知识相结合,比如bzoj1266,bzoj1797) 最大权闭合图(bzoj1497) 最大点权覆盖集,最大点权独立集(bzoj1324) ...

  3. bzoj1296

    首先先预处理每行刷1~m次最多能正确涂出多少格 然后把每行涂色看做一个物品,当重量为j(这行涂了j次),价值为对应能正确涂出的格子数: 总重量为k,然后做分组背包即可 ..,..,..] of lon ...

  4. -_-#【Cookie】使用无 cookies 的域

    cookie-free域名提高网页效率

  5. Charles使用问题, iOS7的http代理(http proxy)配置不生效问题

    Charles配合iOS7使用时, 发现iOS7的http代理(http proxy)配置不生效, 代理信息写完后, 系统没有自动保存. 解决方法: 将些wifi忽略, 重新连接, 再配置代理就好了.

  6. 洛谷P1189 逃跑的拉尔夫(SEARCH)

    洛谷1189 SEARCH 题目描述 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且车上装有用于发射车子移动路线的装置. 那个装置太旧了,以至于只能发射关于那辆车的 ...

  7. PHP字符串替换函数strtr()

    strtr函数比str_replace函数的效率要高很多,strtr()的两种定义方式: strtr(string, from, to)和strtr(string, array)1.strtr区分大小 ...

  8. Weka 入门2

    现在我们介绍使用Weka来对数据进行分类.对数据进行分类,我们必须先指定那一列作为预测类别.因为数据文件格式的问题,类别一般都是最后一列属性.我们可以使用setClassIndex来设置类别.然后我们 ...

  9. 【Java基础】Integer包装类的缓冲池问题

    首先看下面这个例子: public class TestNew { public static void main(String args[]){ Integer i1 = 10; //Integer ...

  10. nginx 多域名配置 （nginx如何绑定多个域名）

         nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...