在 HTML 中隐藏和显示 <div> 是一件很容易的事情。
我们可以使用 CSS 或者一小段 JavaScript 和 jQuery 代码来实现。
document.getElementById 将选择具有给定 id 的 <div>。
我们应该将display设置为“none”，以便在单击 <div> 时使其消失：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 100px;
height: 100px;
float: left;
margin-right: 50px;
}
.parallelogram {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
margin-left: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
.circle {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.square {
border-radius: 0%;
-moz-border-radius: 0%;
-webkit-border-radius: 0%;
}
#parallelogram {
background-color: #1c87c9;
}
#circle {
background-color: #8ebf42;
}
#square {
background-color: #cccccc;
}
</style>
</head>
<body>
<h2>Ckick on the figure</h2>
<div class="parallelogram" id="parallelogram"></div>
<div class="circle" id="circle"></div>
<div class="square" id="square"></div>
<script>
document.getElementById("parallelogram").onclick = function() {
document.getElementById("parallelogram").style.display = "none";
}
document.getElementById("circle").onclick = function() {
document.getElementById("circle").style.display = "none";
}
document.getElementById("square").onclick = function() {
document.getElementById("square").style.display = "none";
}
</script>
</body>
</html>
在我们的上，我们可以找到几何图像工具，它可以快速创建我们想要的任何形状。
另一个使用 JavaScript 隐藏和显示 div 的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<style>
p {
padding: 20px;
background: blue;
}
</style>
</head>
<body>
<button type="button" class="toggle-btn">Toggle</button>
<p>生活终归还得继续。.</p>
<script>
$(document).ready(function() {
//在切换显示/隐藏后显示消息
$(".toggle-btn").click(function() {
$("p").toggle(2000, function() {
//要执行的代码
alert("切换效果完成。");
});
});
});
</script>
</body>
</html>
现在让我们看看如何使用 CSS :hover 伪类通过纯 CSS 隐藏和显示 <div> 元素。
这是完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
form {
display: none;
}
.example:hover>form {
display: block;
}
</style>
</head>
<body>
<div class="example">
<div>Hover to show the form</div>
<form action="http://onitroad.com/mailverify" method="post" target="popupwindow"
onsubmit="window.open('http://onitroad.com/mailverify?uri=jack', 'popupwindow', 'scrollbars=yes,width=650,height=620');return true">
<p>
<input type="text" class="email_field" name="email" size="30" value="E-mail address" />
<input type="hidden" value="alexcican" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="email_btn" name="submit" type="submit" value="Done"/>
</p>
</form>
</div>
</body>
</html>
当用户将鼠标悬停在 <div> 上时，它会消失，并显示表单。
日期：2020-06-02 22:16:21 来源：oir作者：oir