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

最新推荐文章于 2022-11-04 11:42:42 发布

原创最新推荐文章于 2022-11-04 11:42:42 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

11 篇文章

订阅专栏

本文探讨如何利用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";
	    }
	}

效果图: