HTML显示与隐藏：div可见性切换

"这篇HTML代码展示了如何通过JavaScript和CSS实现元素的显示与隐藏。" 在HTML中，我们经常需要控制某些元素（如div）的可见性，以便在页面上动态地显示或隐藏它们。这个例子中，我们看到两种方法来处理这个问题：一种是通过CSS直接设置元素的`display`属性，另一种是利用JavaScript函数来切换元素的可见状态。 首先，CSS（层叠样式表）被用来定义两个div元素的样式。在这个例子中，有两个div元素，id分别为"div1"和"div2"。它们都设置了1像素宽的蓝色边框，高度和宽度都是100像素，并且初始状态下`display`属性被设置为`none`，这意味着这两个div默认是隐藏的。 ```css #div1 { border: 1px #06F solid; height: 50px; width: 100px; display: none; } #div2 { border: 1px #06F solid; height: 50px; width: 100px; display: none; } ``` 接着，JavaScript被用来实现点击链接后改变div的可见性。这里定义了一个名为`toggle`的函数，它接受一个参数`targetid`，该参数是要操作的div的id。 ```javascript function toggle(targetid) { if (document.getElementById) { target = document.getElementById(targetid); if (target.style.display == "block") { target.style.display = "none"; } else { target.style.display = "block"; } } } ``` 这个函数首先检查浏览器是否支持`getElementById`方法，这是现代浏览器的基本功能。然后，它获取指定id的元素，并检查其`display`样式属性。如果`display`为"block"，说明元素当前是可见的，那么将其设置为"none"以隐藏；反之，如果`display`为"none"，则将其设置为"block"以显示元素。 HTML的主体部分包含了两个链接，分别用于控制`div1`和`div2`的显示。链接通过`onclick`事件调用`toggle`函数，并传入对应的div id。 ```html <a href="#" onclick="toggle('div1')">显示/隐藏</a> <div id="div1"></div> <a href="#" onclick="toggle('div2')">显示/隐藏</a> <div id="div2"></div> ``` 当用户点击链接时，对应的div就会根据当前的显示状态切换为可见或不可见。这种技术常用于创建交互式网页元素，比如折叠菜单、提示信息或者加载更多内容的按钮。 总结来说，这个例子主要涉及了HTML的显示与隐藏功能，包括CSS中的`display`属性以及JavaScript的DOM操作。通过这样的方式，我们可以轻松地控制网页上的元素，使页面更加动态和交互性。