zoukankan      html  css  js  c++  java
  • Javascript笔记09:Javascript的下拉式导航菜单

    <!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>,就有多少列

    效果图:

  • 相关阅读:
    虚方法、重写方法以及抽象类的知识小结
    DateTime时间格式
    JavaScript中Eval()函数的作用
    JQuery Event属性说明
    正则表达式30分钟入门教程
    dwz的form表单中url的变量替换
    dwz中权限的控制
    Dwz下拉菜单的二级联动
    Win7下用IIS发布网站
    IntelliJ IDEA 常用快捷键列表及技巧大全
  • 原文地址:https://www.cnblogs.com/hebao0514/p/4705649.html
Copyright © 2011-2022 走看看