`

收缩/展开导航（推荐） (

 
阅读更多

<script type="text/javascript">
if (document.getElementById){ //DynamicDrive.com change

document.write('<style type="text/css"> ')
document.write('.submenu{display: none;} ')
document.write('</style> ')
}

function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change

  if(el.style.display != "block"){
  /*
   打开任意项，其它项自动收缩
   for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu")
    ar[i].style.display = "none";
   }
  */
   el.style.display = "block";
  }else{
   el.style.display = "none";
  }
 }
}
</script>

<body>

<div id="masterdiv">

  <table onclick="SwitchMenu('sub1')" onmouseover="this.style.cursor='hand';">
    <tr>
      <td>分类一</td>
    </tr>
  </table>
  <span class="submenu" id="sub1" style="display='none'">
   内容一<br>
   内容二<br>
  </span>
   

  <p onclick="SwitchMenu('sub2')" onmouseover="this.style.cursor='hand';">
      分类二
  </p>
  <span class="submenu" id="sub2" style="display='block'">
   内容一<br>
   内容二<br>
  </span>
  

  <table>
    <tr>
      <td onclick="SwitchMenu('sub3')" onmouseover="this.style.cursor='hand';">分类三</td>
    </tr>

 <tr class="submenu" id="sub3" style="display='none'">
 <td>
    内容一<br>
    内容二<br>
    </td>
 </tr>
  </table>

</div>

<!-- 其它说明 ---

  <span class="submenu" id="sub4" style="display='block'">
 初始状态：'block'：展开
     'none': 关闭
-->

</body>

分享到：
| DIV+CSS网页布局常用的方法与技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics