css 实现简单的页面隐藏与浮现
在CSS中，可以使用display属性来隐藏或显示页面元素。以下是一个简单的示例，展示了如何使用CSS控制元素的显示和隐藏。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Visibility Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<div id="myDiv">
这里是一些内容。
</div>
<script>
function toggleVisibility() {
var x = document.getElementById("myDiv");
if (x.classList.contains('hidden')) {
x.classList.remove('hidden');
} else {
x.classList.add('hidden');
}
}
</script>
</body>
</html>在这个示例中，我们有一个div元素和一个按钮。当按钮被点击时，它会调用toggleVisibility函数，这个函数会切换myDiv元素的hidden类。如果hidden类存在，它会被移除，使得元素显示；如果不存在，它会被添加，使得元素隐藏。这是通过切换CSS的display属性来实现的。
评论已关闭