Fatal编程技术网
  • javascript/
  • Javascript JS/CSS叠加：如何区分同一页面上的两个按钮？

Javascript JS/CSS叠加：如何区分同一页面上的两个按钮？

javascript css

Javascript JS/CSS叠加：如何区分同一页面上的两个按钮？,javascript,css,overlay,Javascript,Css,Overlay,我在一个网站上工作，在那里我使用了叠加效果。我在W3学校找到了如何做到这一点，而且非常简单 但是，我试图在同一页上有两个单独的覆盖：单击一个按钮可以看到一组文本，单击另一个按钮可以看到另一组文本 我遇到的问题是，我不知道如何区分不同的覆盖层。在我下面的示例中，如果用户单击第一个覆盖按钮，则获取第二个覆盖的文本。如果他们点击第二个覆盖按钮，就会得到第二个覆盖的文本。换句话说，我似乎无法获得要显示的第一个覆盖文本 我想这是一件相当简单的事情，但我自己还没有弄明白 下面是一些代码。这不是我的实际站点，

我在一个网站上工作，在那里我使用了叠加效果。我在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> 


#叠加{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#覆盖层2{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#正文{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
覆盖1个文本
覆盖文本示例
覆盖层1
关于（）的函数{
document.getElementById（“overla1”）.style.display=“block”；
}
函数off（）{
document.getElementById（“overla1”）.style.display=“无”；
}
覆盖2文本
覆盖层2
关于（）的函数{
document.getElementById（“overlay2”）.style.display=“block”；
}
函数off（）{
document.getElementById（“overlay2”）.style.display=“无”；
}
您正在为两个覆盖调用相同的
打开
和
关闭
函数。。。换句话说，您正在重新定义函数

将您的
正文
更改为以下内容：

<!-- 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>


覆盖1个文本
覆盖文本示例
覆盖层1
覆盖2文本
覆盖层2
功能开启（id）{
document.getElementById（id）.style.display=“block”；
}
功能关闭（id）{
document.getElementById（id）.style.display=“无”；
}
您正在为两个覆盖调用相同的
打开
和
关闭
函数。。。换句话说，您正在重新定义函数

将您的
正文
更改为以下内容：

<!-- 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>


覆盖1个文本
覆盖文本示例
覆盖层1
覆盖2文本
覆盖层2
功能开启（id）{
document.getElementById（id）.style.display=“block”；
}
功能关闭（id）{
document.getElementById（id）.style.display=“无”；
}
非常感谢您！非常感谢你！