有時我們開發時,會遇到一個頁面分爲好幾大塊,整個頁面顯示起來比較冗長。此時,可以通過收縮部分內容,先對展開內容進行操作,然後收縮起來再對收縮的內容進行展開。
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" οnclick="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>