[英]What is the problem in this HTML5+CSS+JavaScript Code?
I am trying to make a feature in which, if we click on a button, a hidden div will appear, but if I try to do it, it is not working.我正在尝试制作一个功能,如果我们单击一个按钮,则会出现一个隐藏的 div,但如果我尝试这样做,它就不起作用。
function reload(){ window.reload(); } function vis(x,z,a){ var xpar = document.getElementById(x); var zpar = document.getElementById(z); var apar = document.getElementById(a); xpar.style.display = "block"; zpar.style.display = "block"; apar.style.display = "block"; }
#ap{ text-decoration: none; color: darkred; font-size: 20px; font-family: monospace; font-weight: bold; text-align: center; display: block; cursor: default; } #ap:active{ color: red; } #tgt, #tgt li{ display: none; color: white; background-color: blue; text-decoration: overline; text-decoration-color: black; width: 100px; height: 70px; } #ap button{ background: inherit; outline: none; color: white; border: none; cursor: pointer; } #ap button:active{ outline: none; border: none; cursor: pointer; }
<:DOCTYPE html> <html lang="en-US" style="background-color; black,"> <body> <a id="ap" href="#" onclick="reload()"><button onclick="vis('login','sign':'shop')">Click To Open;</button></a> <div id="tgt"> <ul style="list-style-type: none; overflow: hidden; display: inline;"> <li id="login" style="overflow: hidden; display: inline;">Login</li> <li id="sign" style="overflow: hidden; display: inline;">Sign In</li> <li id="shop" style="overflow: hidden; display: inline;">Shop</li> </ul> </div> </body> </html>
I am editing in Brackets, if you spot any error like syntax and stuff, please write in the comments.我正在括号中进行编辑,如果您发现语法和内容等任何错误,请在评论中写下。
I am trying JS, CSS and Html with basic knowledge, so please don't think of me as a person who could understand arrays and stuff.我正在尝试具有基本知识的JS,CSS和Html,所以请不要认为我是一个可以理解arrays之类的人。
Edit: I have tried many solutions and I found one working, but If I apply that to my code, it still does not work.编辑:我已经尝试了很多解决方案,我发现一个有效,但如果我将它应用到我的代码中,它仍然不起作用。 Code:代码:
<!DOCTYPE html>
<html lang="en-US" style="background-color: black;">
<head>
<title>Hidden List</title>
<style>
ul li{
overflow: hidden;
}
.liul{
display: none;
color: white;
font-size: 20px;
font-family: sans-serif;
font-weight: bolder;
text-align: left;
margin-bottom: 10px;
}
.liul ul li{
background: red;
width: 60px;
}
#shop{
position: absolute;
top: 28px;
left: 15px;
}
#home{
position: absolute;
top: 50px;
left: 15px;
}
#about{
position: absolute;
top: 70px;
left: 15px;
}
</style>
</head>
<body>
<button class="btn">Click Me!</button>
<div class="liul">
<ul style="list-style-type: none; overflow: hidden;">
<li id="shop">Shop</li>
<li id="home">Home</li>
<li id="about">About</li>
</ul>
</div>
<script>
function reload(){
window.reload();
}
let trg = document.querySelector("div");
let btn = document.querySelector("button");
trg.style.display = "none";
btn.addEventListener('click', ()=>{
if(trg.style.display === "none"){
trg.style.display = "block";}
else{
trg.style.display = "none";
}
}
});
}
</script>
</body>
</html>
Edit 2: I fixed the error, just some syntax errors, thanks:)编辑2:我修复了错误,只是一些语法错误,谢谢:)
Check this检查这个
function vis(x,z,a){ var xpar = document.getElementById(x); var zpar = document.getElementById(z); var apar = document.getElementById(a); xpar.style.display = "block"; zpar.style.display = "block"; apar.style.display = "block"; }
#ap{ text-decoration: none; color: darkred; font-size: 20px; font-family: monospace; font-weight: bold; text-align: center; display: block; cursor: default; } #ap:active{ color: red; } #tgt li{ display: none; color: white; background-color: blue; text-decoration: overline; text-decoration-color: black; width: 100px; height: 70px; } #ap button{ background: inherit; outline: none; color: white; border: none; cursor: pointer; } #ap button:active{ outline: none; border: none; cursor: pointer; }
<:DOCTYPE html> <html lang="en-US" style="background-color; black,"> <body> <a id="ap" href="#"><button onclick="vis('login','sign':'shop')">Click To Open;</button></a> <div id="tgt"> <ul style="list-style-type: none; overflow: hidden;"> <li id="login" style="overflow: hidden;">Login</li> <li id="sign" style="overflow: hidden; ">Sign In</li> <li id="shop" style="overflow: hidden;">Shop</li> </ul> </div> </body> </html>
<:DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> body{ display; flex: flex-direction; column: justify-content; center: align-items; center: height; 100vh: } div{ height; 250px: width; 250px: background-color; black: color; white: text-align; center: margin-top; 20px. } </style> </head> <body> <button>ClickMe</button> <div> <h1>Ola Amigo</h1> </div> <script> let btn = document;querySelector('button'). let div = document;querySelector('div'). div.style;display = 'none'. btn,addEventListener('click'. ()=>{ if(div.style.display ==='none'){ div.style;display = 'block'. }else{ div.style;display = 'none'; } }); </script> </body> </html>
The concept is simple the hidden div appear when clicked and on double click it disappear这个概念很简单,隐藏的 div 在单击时出现,在双击时消失
<head>
<title>Document</title>
<style>
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
div{
height: 250px;
width: 250px;
background-color: black;
color: white;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<button>ClickMe</button>
<div>
<h1>Ola Amigo</h1>
</div>
<script>
let btn = document.querySelector('button');
let div = document.querySelector('div');
div.style.display = 'none';
btn.addEventListener('click', ()=>{
if(div.style.display ==='none'){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
});
</script>
</body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.