JavaScript结合CSS样式实现可折叠区域的例子

最新推荐文章于 2025-01-01 10:54:50 发布

原创最新推荐文章于 2025-01-01 10:54:50 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #border #div #function #html

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文介绍了一个简单的CSS技巧，通过修改display属性实现元素的显示与隐藏。利用JavaScript动态切换元素的display属性值，达到控制元素是否可见的效果。适用于网页中内容的动态管理。

这里介绍一个比较简单的办法，就是使用css的display属性。当display设置为none时，元素就会从页面流里被移除。

演示代码如下：

<html> <head> <title>Style Example</title> <script type="text/javascript"> function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } </script> </head> <body> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent1')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent1">This is some content to show and hide.</div> <p> </p> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent2">This is some content to show and hide.</div> </body> </html>