当我点击使用 onlick 事件的元素时,它会按原样打开,但随后立即关闭。起初我在其他文件中有我的脚本,我使用了脚本 src 方法。然后我试图将脚本移到正文部分的底部,什么也没有。试图在正文部分的开头移动脚本仍然什么都没有。我什至查过 W3Schools,他们的例子和我的一样!
这是我的 HTML 代码:
<body>
<header>
<h1>Joy Division</h1>
<nav class="nav">
<a href="" ><img src="../img/menu.png" id="menu_button" onclick="menuOpen()"></a>
<div id="navbar_active">
<a href="" ><img src="../img/back.jpg" id="menu_back" onclick="menuClose()"></a>
<li><a href="discography.html">Discography</a></li>
<li><a href="members.html">Band Members</a></li>
<li><a href="history.html">History</a></li>
<li><a href="neworder.html">New Order</a></li>
</div>
</nav>
</header>
<script>function menuOpen() {
document.getElementById("menu_button").style.display = "none";
document.getElementById("navbar_active").style.display = "block";
}
function menuClose() {
document.getElementById("navbar_active").style.display = "none";
document.getElementById("menu_button").style.display = "block";
}
</script>
</body>
我的 CSS 代码:
html {
margin: 0;
min-height: 100%;
background-image: url('../img/background1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
body {
color: white;
}
header {
display: block;
position: relative;
}
header h1 {
margin: 0;
display: block;
margin-top: 30px;
font-size: 70px;
font-family: Perpetua Titling MT;
font-weight: lighter;
text-align: center;
text-transform: uppercase;
}
nav {
display: block;
position: absolute;
top: 0;
margin-top: 15px;
margin-left: 20px;
}
#menu_button{
display: block ;
height: 60px;
width: 60px;
}
nav a img:hover {
opacity: 0.8;
}
#navbar_active {
display: none;
position: absolute;
top: 0;
margin-left: -1.75em;
margin-top: -2.8em;
width: 420px;
height: 100vh;
background: inherit;
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(170deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
opacity: 0.9;
}
#navbar_active img {
margin-top: 2.8em;
margin-left: 20em;
height: 50px;
width: 50px;
}
#navbar_active li {
list-style: none;
margin-top: 4em;
padding-top: 3em;
text-align: center;
}
#navbar_active li a {
text-decoration: none;
text-transform: uppercase;
font-family: Perpetua Titling MT;
font-weight: lighter;
font-size: 40px;
color: white;
}
#navbar_active li a:hover {
opacity: 0.2;
color: white;
}