如何避免内联 javascript:void(0); 代码并在外部 JavaScript 文件中使用?

我是这个Web开发领域的新手。这就是我使用一些在线教程的原因。现在我正在使用 w3 学校的响应式导航栏。他们使用了内联JavaScriptjavascript：void(0)和onclick="myFunction()"。但我希望它们都放在外部 JavaScript 文件中。我怎样才能做到这一点？任何JavaScript专家都可以帮助我吗？提前谢谢。我包含了我从该教程中片段化的所有代码。

我已经用位置属性固定了顶部响应导航栏，宽度：100%; 和顶部：0;

这是我想要摆脱的问题的屏幕截图

HTML 语言作为名为索引的外部文件.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style-main.css">
</head>
<body>
</body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div> 
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script src="static/js/main.js"></script>
</body>
</html>

我还制作了一个外部CSS文件并将其与主HTML文件连接。

body {
margin:0;
font-family:Arial;
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
top: 0;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}

我还为 JAVASCRIPT 创建了一个外部文件，并将其与最后一个正文标签上方的主 HTML 连接起来，但无法摆脱内联 JAVASCRIPT 这些是javascript：void(0);onclick="myFunction()">

我可以在外部 JAVASCRIPT 文件中重写该行(在 HTML 内部)吗？

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

我希望JavaScript文件应该是完全外部的。我不想根据专家的意见使用任何内联JavaScript。此外，如果可能的话，我想从移动优先的方法开始。提前谢谢。

你通常会在javascript中分配事件侦听器。永远不要使用内联JavaScript。

document.getElementById('foo').addEventListener('click', event => {
// event holds the event's additional data 
console.log('clicked');
});

<a id="foo">Click</a>

W3Schools的问题在于他们的例子往往有点过时。另请注意，它们实际上并不与 W3C 相关联。MDN 是一个更好的资源，尽管这些教程对于绝对的新手来说可能更令人生畏。

正如 Chris 在他们的回答中提到的，你应该使用事件侦听器。此外，根据您的浏览器支持要求，您还应该寻找其他更现代的方法。与其操作完整的类属性，不如考虑使用classList，特别是toggle()

document.querySelector("#myTopnav [data-action=toggleMenu]").addEventListener("click", myFunction);
function myFunction() {  
var nav = document.getElementById("myTopnav");
console.log(nav);
nav.classList.toggle("topnav");  
}

body {
margin:0;
font-family:Arial;
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
width: 100%;
top: 0;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
/*float: right;*/
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div> 
<a href="#about">About</a>
<a href="#" style="font-size:15px;" class="icon" data-action="toggleMenu">&#9776;</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

相关内容

最新更新

热门标签：