开发学院网页设计JavaScript 通过层实现页面部分内容展开与收缩 阅读

通过层实现页面部分内容展开与收缩

 2009-10-24 20:12:53 来源:WEB开发网   
核心提示:有时我们开发时,会遇到一个页面分为好几大块,通过层实现页面部分内容展开与收缩,整个页面显示起来比较冗长,此时, <STYLE> .expanded { } .collapsed { DISPLAY: none; }</STYLE> 2 一段脚本,实现onclick事件或其他事件处理的方

有时我们开发时,会遇到一个页面分为好几大块,整个页面显示起来比较冗长。此时,可以通过收缩部分内容,先对展开内容进行操作,然后收缩起来再对收缩的内容进行展开。

   1  必须的样式表,控制显示和隐藏。

  <STYLE>
  .expanded
  {
  
  }
  .collapsed
  {
  DISPLAY: none;
  }

</STYLE>

   2  一段脚本,实现onclick事件或其他事件处理的方法。

  <script language="javascript">
  <!--
  function change()
  {
   var child = document.all[event.srcElement.getAttribute("child",false)];
   if (null != child){
   if(child.className == "expanded")
   {
    child.className = "collapsed";
    return;
   }
   if(child.className == "collapsed")
   {
    child.className = "expanded";
    return;
   }
   }
  }
  //-->
  </script> 

3  如何在html使用。

  <p align="center">是否显示 <input type="checkbox"   child="all" /></p>
     <div  class="collapsed" id="all">  <!--初始为不显示-->

<table>

<tr>
        <td> 属性名:
         <input name="nameData3" type="text" id="nameData3" /></td>
        <td> 属性值:
         <input name="valueData3" type="text" id="valueData3" />
        </td>
       </tr>
       <tr>
        <td> 属性名:
         <input name="nameData4" type="text" id="nameData4" /></td>
        <td> 属性值:
         <input name="valueData4" type="text" id="valueData4" />
        </td>
       </tr>
      </table>

</div>

Tags:通过 实现 页面

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读