單擊一個 div 以激活其他 div
[英]Click on a div to activate other div
問題描述
當我按下具有 class 或 id 的<div>元素時，如何使具有類或 id 的多個<div>元素激活。 如下圖所示，我希望它從白屏到我使用 css 類和 ID 制作的那種類型的屏幕到 go。 https://i.stack.imgur.com/tPZou.jpg
你可以在這里看到我制作的手機。 按黑色區域得到白屏，我要按白色得到密碼屏幕： https://seigmann123.github.io/iphone12/phone.ZFC35FDC70D5FC69D269EZ883A8
function screen() { var e = document.getElementById("screen"); var c = window.getComputedStyle(e).backgroundColor; if (c === "rgb(0, 0, 0)") { document.getElementById("screen").style.background = "#ffffff"; } }
body { display: flex; justify-content: center; align-items: center; }.phone { position: relative; background: rgb(32, 32, 32); border-radius: 30px; height: 560px; width: 295px; margin: 0 auto; }.sensores { position: absolute; background: rgb(32, 32, 32); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; height: 32; width: 175; margin: 0 auto; right: 0; left: 0; } #screen { position: absolute; background: #000; border-radius: 30px; height: 540px; width: 275px; margin: 0 auto; right: 0; left: 0; top: 10; }.off-on-button { width: 3px; height: 60px; background: rgb(32, 32, 32); position: absolute; right: 0; margin: 0 auto; top: 125; border-radius: 20px; left: 294; }.sound-up { width: 3px; height: 35px; background: rgb(32, 32, 32); position: absolute; right: 0; margin: 0 auto; top: 115; border-radius: 20px; left: -295; }.sound-down { width: 3px; height: 35px; background: rgb(32, 32, 32); position: absolute; right: 0; margin: 0 auto; top: 160; border-radius: 20px; left: -295; }
<div class="phone"> <div id="screen" onclick="javascript:screen();"></div> <div class="sensores"></div> <div class="off-on-button"></div> <div class="sound-up"></div> <div class="sound-down"></div> </div>
3 個解決方案
解決方案1
1 已采納 2021-03-10 14:05:46
嘗試這個。 模擬您想要實現的目標的示例代碼。
<!DOCTYPE html>
<head>
<title>Demo</title>
<style>
#whiteDiv, #blueDiv, #passwd{
height: 300px;
width:300px;
}
#whiteDiv, #passwd{
display: none;
}
</style>
</head>
<body>
<div style="border: 1px solid #000;width:300px;height:300px">
<div style="background-color:#08c" id="blueDiv"onclick="activateWhite();">
click me
</div>
<div style="background-color:#fff" id="whiteDiv" onclick="showPasswd();">
click me
</div>
<div style="background-color: #fff;" id="passwd">
<p>Enter password</p>
<input type="password">
</div>
</div>
<script>
function activateWhite(){
document.getElementById("whiteDiv").style.display = "block";
document.getElementById("blueDiv").style.display = "none";
}
function showPasswd(){
document.getElementById("passwd").style.display = "block";
}
</script>
</body>
解決方案2
0 2021-03-10 13:57:50
將 JS 更改為
function screen() {
var e = document.getElementById("screen");
e.classList.toggle("black-screen")
}
將此添加到 css
#screen{
background:white;
...
...
}
.black-screen{
background:#000 !important;
}
解決方案3
0 2021-03-10 16:46:38
我可以嘗試更好地解釋並表現得更好。
我想這樣做，我可以按#screen以獲取#screen-on ，然后#screen被替換為#screen-on 。 當我按下#screen-on我想將#password-screen作為#screen-on的疊加層，# #sircle在頂部
body{
display: flex;
justify-content: center;
align-items: center;
}
.phone{
position: relative;
background: rgb(32, 32, 32);
border-radius: 30px;
height: 560px;
width: 295px;
margin: 0 auto;
}
.sensores{
position: absolute;
background: rgb(32, 32, 32);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height:32;
width: 175;
margin: 0 auto;
right: 0;
left: 0;
}
#screen{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#screen-on{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#sircle{
width: 65px;
font-size: 45px;
line-height: 1.4;
height: 65px;
background: #494545;
position: absolute;
right: 0;
text-align: center;
left: 0;
margin: 0 auto;
bottom: 0px;
top: 50;
border-radius: 50%;
color: #dcdcdc;
}
#password-screen {
position: absolute;
height: 540px;
width: 275px;
background-color: rgb(29, 27, 27);
right: 0;
left: 0;
top: 10;
margin: 0 auto;
opacity: 0.5;
border-radius: 30px;
}
.off-on-button{
width: 3px;
height: 60px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 125;
border-radius: 20px;
left: 294;
}
.sound-up{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 115;
border-radius: 20px;
left: -295;
}
.sound-down{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 160;
border-radius: 20px;
left: -295;
}
單擊 div 時激活類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.