Я только недавно начал использовать JavaScript, и я прошу прощения, если я пренебрег некоторыми основами.Я следовал учебному пособию по созданию адаптивного липкого навигационного меню с помощью JQuery, которое также включает в себя меню гамбургеров, когда окно браузера сокращается.Исходный код для справки: https://www.dropbox.com/sh/2so52l4q74eu470/AABDHemSW_WsLUlBfPaLsNwsa?dl=0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
Однако проблема заключается в том, что я пытаюсь поместить этот код JavaScript в отдельный файл JavaScript (как показано ниже, где я попытался разделить HTML-код и код JavaScript) и попробуйте связать его с HTML-файлом, меню гамбургера больше не активируется.Я действительно не могу понять, является ли это проблемой с отступом в коде JavaScript или в неправильном формате.
HTML code (где я пытался связать файл HTML сФайл JavaScript с кодом JavaScript.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
Файл JavaScript с именем script.js и помещен в папку с именем 'js'
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
Вид застрялна это в течение часа, поэтому, в основном, вместо того, чтобы иметь код JavaScript в файле HTML, как я могу правильно связать файл HTML с кодом JavaScript в файле JavaScript?