javascript - 切换按钮 onClick 方法不起作用
问题描述
我不明白为什么这段代码不起作用。
它可以在 jsfiddle 等在线平台上运行,但是当我在 VS Code 实时服务器上尝试时它不起作用。
此代码提供响应式标头。如果页面大小小于 1210 像素,导航栏似乎不会。如果单击按钮,则会出现导航栏。对不起我的英语不好。
https://jsfiddle.net/1n8zv5xL/1/
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
CSS
@import url("https://db.onlinewebfonts.com/c/b2932945dbc71a0a2a4c03dd305cfe3a?family=Bauhaus");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-color:white;
justify-content: space-between;
display: flex;
align-items: center;
padding: 25px 15%;
height: 100px;
}
li,a,button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header h1 {
font-family: "Bauhaus";
color:rgba(0, 136, 169, 1);
font-size: 45px;
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
html{
overflow-y: scroll;
}
.navbar-links {
list-style: none;
}
.navbar-links li {
display: inline-block;
padding: 0px 20px;
}
.navbar-links li a {
transition: all 0.3s ease 0s;
}
.navbar-links li a:hover {
color: rgba(0, 136, 169, 1);
}
.logo {
width: 500px;
display: flex;
flex-direction: initial;
align-items: center;
justify-content: space-around;
}
.toggle-button {
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}
@media screen and (max-width:1210px) {
header {
flex-direction: column;
}
.navbar-links {
display: flex;
flex-direction: column;
}
.toggle-button {
display: flex;
}
.navbar-links.active {
display: none;
}
}
JAVASCRIPT
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
解决方案
问题出在头上。
您将脚本包含在 head 中,因此它将在文档之前加载。因此,为了让您访问 dom 节点,您应该ready
在 jquery 中侦听事件 - 或者您可以将脚本移动到body
例如:
$(function() {
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
})
或者
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</body>
<footer>
</footer>
</html>
这应该够了吧。
推荐阅读
- typescript - Typescript - 如何强制调用类方法?(强制方法)
- kubernetes - 云提供商未正确初始化
- maven - maven-surefire-plugin 在 SpringBoot 2.2.2.RELEASE 及更高版本中不起作用
- c++ - 如何将 cv::Mat 转换为 void*
- javascript - 阿拉伯语 JavaScript 中的日期时间
- mpi - 程序完成后 mpirun 挂起
- angular - 带有 Angular 和 Spring 的 Websocket
- c# - 'System.String[]' 不能映射到原始类型
- r - 如何在 nls 的 poly 方法中包含参数“a”?
- javascript - 如何在react.js中处理请求标头接受application / ld + json获取请求