码迷,mamicode.com
首页 > 编程语言 > 详细

javascript笔记09:javascript的下拉式导航菜单

时间:2015-08-05 21:45:30      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

<!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的下拉式导航菜单

标签:

原文地址:http://www.cnblogs.com/hebao0514/p/4705649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!