个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我是网络开发领域的新手。这就是为什么我正在使用一些在线教程。现在我正在使用 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()">☰</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/
28
4
0
作为作业的一部分，我正在尝试创建一个用户级线程库，如 pthreads。 为了处理线程之间的上下文切换，我使用了“swapcontext”函数。在使用它之前，我必须使用“makecontext”函数创
我是一名初级 C++ 程序员，我正在 Linux 机器上编程。 我遇到了这个错误: cannot convert ‘void* (Network::*)(void*)’ to ‘void* (*)(v
我知道，例如 void *(*myFuncName)(void*) 是一个函数指针，它接受并返回 void*。 这是一个有两个参数的指针吗？void 指针是该类型的另一个返回 void* 和 void
所以我被告知它们彼此几乎相同 void function1 (void(func)(int), int arg){ func(arg); } void function2 (void(*fun
我目前正在 GNU Radio 上开发一个 bloc，我想使用一个线程。该线程用于从 UDP 套接字获取数据，因此我可以在我的 GNU Radio 集团中使用它。 “一般工作”功能是执行所有信号和数据
我正在尝试在主函数中创建一个线程并通过我的线程调用另一个类的函数。 在 main.cpp 中: SocketHandler *callserver; pthread_t thread1; pthrea
我正在使用pthread 为我自己实现线程类。所以，我创建了 Thread 类如下: class Thread { public: Thread() { } virtual void*
我收到上述警告并理解它，但就是不知道如何解决它。我的代码在下面，但基本上我所做的是在结构中存储一个函数指针，并在我从 main.c 调用的另一个函数中初始化该结构。当我将代码与默认函数(即 free(
在我的 android 应用程序中，我在 doInBackground 中执行一些操作通过扩展 AsyncTask类(class)。 (我在这个类中执行任何 UI 都没用) 这是正确使用 AsyncT
我在 GNU 编译器集合中使用 C。所以我需要将函数指针传递给一个函数。现在有两种我想要处理的可接受的函数指针原型(prototype): void function(void); 和 void fu
我正在尝试使用“CameraManager”类创建一个新线程，但出现以下错误: cannot convert '*void(CameraManager:: * )(void*) to void*( *
我想构建一个可以隐藏线程创建的“IThread”类。子类实现“ThreadMain”方法并使其自动调用，如下所示: class IThread { public: void BeginThre
我不明白什么 void (**)(void *, const char *) /* ^^ why are there 2 asterisks here? 意思是，它是一个指向函数的指针，但我失败
我必须将“risposta”类型的参数“r”发送到函数 RispostaServer。编译器给我:invalid conversion void*(*)() to void*(*)(void*) 这是
所以我目前正在使用，或者至少正在尝试编写一个利用 this C pthread threadpool library. 的程序 值得注意的是 thpool.h 中的以下函数: int thpool_a
我正在尝试使用 void* 指针将不同的对象存储在一个全局表中。问题是如何取回 void* 对象。如果我有一个公共(public)基类，比如 Object ，我总是可以将 void* 指针存储为 Ob
我是一名 C 程序员(在 linux 上)，但现在我有一个关于 C++ 的项目，并且有一个问题。 这里是示例代码 g_action.sa_sigaction = (void(*)(int,siginf
class Scoreget{ private: //some variables public: Scoreget(){ //
这个问题在这里已经有了答案: Is there a difference between foo(void) and foo() in C++ or C? (4 个答案) func() vs fun
我正在尝试使用 SDL 和 SDL_Mixer 为音频创建一个 C++ 应用程序，并且正在尝试遵循 this教程。但是，使用 SDL_Mixer 的 Mix_HookMusicFinished() 不
我是一名优秀的程序员,十分优秀！