html 将部分内容隐藏/显示

最新推荐文章于 2025-03-10 21:37:25 发布

ghost165

最新推荐文章于 2025-03-10 21:37:25 发布

阅读量4.5w

点赞数 8

分类专栏： html

本文链接：https://blog.csdn.net/ghost165/article/details/78369935

版权

html 专栏收录该内容

1 篇文章

订阅专栏

最近在做网页（一群完全不会网页的人不知道哪来的自信去水网页设计比赛），需要实现一部分内容的点击展开，就像评论区——展开所有评论。所以上网搜了一下html内容的隐藏和实现，基本上都是用的visibility和display：

1）div的visibility控制div的隐藏和显示

缺点：隐藏后页面显示空白

    style="visibility: none;"
　　document.getElementById("typediv1").style.visibility="hidden";//隐藏
　　document.getElementById("typediv1").style.visibility="visible";//显示

2）设置display属性可以是div隐藏后释放占用的页面空间

   style="display: none;"
　　document.getElementById("typediv1").style.display="none";//隐藏
　　document.getElementById("typediv1").style.display="";//显示

但是，这种回答对于我这种一边写网页一遍学习，没有看过html的人还说，着实有些懵逼，但是幸好又看到另一个。

<!DOCTYPE HTML>
<html>
<head>
<script>
	function isHidden(oDiv){
      var vDiv = document.getElementById(oDiv);
      vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';
    }
</script></head>
<body>
<div style="cursor:hand" οnclick="isHidden('div1')"><b>其他一条评论</b></div>
		<div id ="div1" style="display:none">隐藏内容</div>
</body></html>

使用jQuery的隐藏显示函数，参考w3school相关教程：http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_show