个人中心
gpt4 book ai didi

javascript - 如何避免内联 javascript :void(0); code and use in external JavaScript file?

转载 作者：行者123 更新时间：2023-11-28 16:02:34 27 4
gpt4 key购买 nike

我是网络开发领域的新手。这就是为什么我正在使用一些在线教程。现在我正在使用 w3 学校的响应式导航栏。他们使用了内联 JavaScript javascript:void(0) 和 onclick="myFunction()"。但我希望它们都在外部 JavaScript 文件中。我怎样才能做到这一点？任何JavaScript专家都可以帮助我吗？提前致谢。我包括了我从该教程中提取的所有代码。

我已将顶部响应式导航栏固定为位置属性，宽度:100%；和顶部:0；

Here is the screen shot of problem that I want to get rid of

HTML 语言作为名为 index.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 创建了一个外部文件，并在最后一个 BODY 标签上方将其与主 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。此外，如果可能的话，我想从移动优先的方法开始。提前致谢。

最佳答案

您通常会分配 event listeners在javascript中。永远不要使用内联 javascript。

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

关于javascript - 如何避免内联 javascript :void(0); code and use in external JavaScript file?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57453466/

27 4 0
文章推荐： javascript - 我该怎么做 "when I click other button counter change"
文章推荐： html - 如何创建内联 h1 和跨度，并将跨度对齐到结尾？
文章推荐： css - 从我的笔记本电脑将自定义 CSS(持续)应用到我经常查看的网站？
文章推荐： html - 引导按钮中的图像随背景颜色而不是按钮颜色而变化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com