有時我們開發(fā)時,會遇到一個頁面分為好幾大塊,整個頁面顯示起來比較冗長。此時,可以通過收縮部分內(nèi)容,先對展開內(nèi)容進行操作,然后收縮起來再對收縮的內(nèi)容進行展開。那么,如何通過層實現(xiàn)網(wǎng)站頁面部分內(nèi)容展開與收縮呢?下面我們來學(xué)習(xí)一下:
1 必須的樣式表,控制顯示和隱藏。
<STYLE> .expanded { } .collapsed { DISPLAY: none; }
</STYLE>
2 一段腳本,實現(xiàn)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" onclick="change()" 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 |