我正在一个使用叠加效果的网站上工作。我在W3学校找到了如何做到这一点，而且很容易。
然而，我试图在同一页上有两个单独的覆盖：单击一个按钮可以查看一组文本，单击另一个按钮则可以查看另一组文本。
我遇到的问题是，我不知道如何区分单独的覆盖层。在下面的示例中，如果用户单击第一个覆盖按钮，则获取第二个覆盖的文本。如果他们点击第二个叠加按钮，就会得到第二个覆盖的文本。换句话说，我似乎无法显示第一个覆盖文本。
我想这是一件相当简单的事情，但我还没有自己想出来。
下面是一些代码。这不是我真正的网站，而是W3上提供的经过轻微编辑的版本。如果我能在这里学会如何区分这两个按钮，我可以在自己的网站上做。
谢谢你的帮助。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<style>
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- Overlay 1: -->
<div id="overlay1" onclick="off()">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on()">Overlay 1</button>
</div>
<script>
function on() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay1").style.display = "none";
}
</script>
<!-- Overlay2: -->
<div id="overlay2" onclick="off()">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on()">Overlay 2</button>
</div>
<script>
function on() {
document.getElementById("overlay2").style.display = "block";
}
function off() {
document.getElementById("overlay2").style.display = "none";
}
</script>
</body>
</html>
您正在为两个覆盖调用相同的on和off函数。。。换句话说，您正在重新定义函数。
将您的body更改为以下内容：
<!-- Overlay 1: -->
<div id="overlay1" onclick="off('overlay1')">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on('overlay1')">Overlay 1</button>
</div>
<!-- Overlay2: -->
<div id="overlay2" onclick="off('overlay2')">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on('overlay2')">Overlay 2</button>
</div>
<script>
function on(id) {
document.getElementById(id).style.display = "block";
}
function off(id) {
document.getElementById(id).style.display = "none";
}
</script>