这个 HTML5+CSS+JavaScript 代码有什么问题?
What is the problem in this HTML5+CSS+JavaScript Code?
我正在尝试做一个功能,如果我们点击一个按钮,一个隐藏的 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>
我正在Brackets中编辑,如果您发现语法之类的错误,请写在评论中。
我正在尝试JS,CSS和Html有基础知识,所以请不要把我当成一个能看懂数组什么的人。
编辑:我已经尝试了很多解决方案并且发现了一个有效,但是如果我将它应用到我的代码中,它仍然不起作用。
代码:
<!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>
编辑 2:
我修复了错误,只是一些语法错误,谢谢 :)
检查这个
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>
这个概念很简单,点击时隐藏 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>
我正在尝试做一个功能,如果我们点击一个按钮,一个隐藏的 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>
我正在Brackets中编辑,如果您发现语法之类的错误,请写在评论中。
我正在尝试JS,CSS和Html有基础知识,所以请不要把我当成一个能看懂数组什么的人。
编辑:我已经尝试了很多解决方案并且发现了一个有效,但是如果我将它应用到我的代码中,它仍然不起作用。 代码:
<!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>
编辑 2: 我修复了错误,只是一些语法错误,谢谢 :)
检查这个
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>
这个概念很简单,点击时隐藏 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>