用tbody和div隐藏和展开页面的效果

本文探讨如何利用HTML的tbody元素和div来控制页面内容的隐藏和展开效果,实现信息的动态显示,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例子:
<table>
<tr><td></td></tr>

<tbody id="id__1">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>

<tr><td></td></tr>
</table>


<tr>
        <td colspan="12">
 			<div id="zhangkai" style="background: #e2eff7 ;text-align:center; margin-top: 0px" > 
 				<img src="<%=request.getContextPath()%>/img/exBn4.gif" onclick="test(1)"></img>
 			</div>
			<div id="zhedie" style="background: #e2eff7  ;text-align:center; margin-top: 0px;display: none;" > 
				<img src="<%=request.getContextPath()%>/img/exBn3.gif" onclick="test(0)"></img>
			</div> 
 <span style="white-space:pre">	</span></td>
 </tr>
  
  
  <tbody style="display:none;"  id="tt" color="red">


function test(str){
	    if(str == 1){
	        document.getElementById("tt").style.display = "";
	        document.getElementById("zhangkai").style.display = "none";
	        document.getElementById("zhedie").style.display = "";
	    } else {
	        document.getElementById("tt").style.display = "none";
	        document.getElementById("zhangkai").style.display = "";
	        document.getElementById("zhedie").style.display = "none";
	    }
	}

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值