Fatal编程技术网
  • javascript/
  • Javascript 如何使用外部js文件？

Javascript 如何使用外部js文件？

javascript html

Javascript 如何使用外部js文件？,javascript,html,Javascript,Html,尝试将js脚本从html文件移动到外部js文件时，我无法使其工作。js脚本在html文件中工作正常，但当我尝试从外部js文件使用它时，它不工作。我查看了如何导入外部js文件，我认为我做得对，但我的脚本不工作。我做错了什么 HTML文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NAVBAR</title>

尝试将js脚本从html文件移动到外部js文件时，我无法使其工作。js脚本在html文件中工作正常，但当我尝试从外部js文件使用它时，它不工作。我查看了如何导入外部js文件，我认为我做得对，但我的脚本不工作。我做错了什么

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NAVBAR</title>
    <meta name="description" content="NAVBAR - A responsive nav manu." />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!--
    <script type="text/javascript">
        $(document).ready( function(){

            $('.m_btn').click( function(){

                $('.menu').stop().slideToggle();

            });

        });
    </script>
    -->
</head>

<body>
    <header>

        <div class="container">
            <div class="logo">NAVBAR</div>
            <a href="javascript:void(0);" class="m_btn">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <nav class="menu">
                <ul>
                    <li><a href="#home">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </nav>
        </div>

    </header>

    <main>
    <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </main> 

    <footer>
        <p>NAVBAR 2018</p>
    </footer>
    <script type="text/javascript" src="navbar.js"></script>
</body>

</html>
CSS：

* {
    margin: 0px;
    padding: 0px;
}
.container {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

header {
    background: #ffffff;
    border-bottom: 1px solid #2d2d2d;
    padding: 30px 0;
}

.logo {
    float: left;
    font-size: 20px;
    font-weight: bold;
}

.menu {
   float: right;
}

.menu ul {

}

.menu ul li {
    float: left;
    margin-left: 40px;
    list-style-type: none;
}

.menu ul li a {
    color: #2d2d2d;
    font-size: 14px;
    text-decoration: none;
}

.menu ul li a:hover {
    color: #d2d2d2;
    text-decoration: none ;
}

.m_btn {
    float: right;
    display: block;
    width: 35px;
}

.m_btn span {
    background: #2d2d2d;
    height: 2px;
    display: block;
    margin: 5px 0;
}

/* Mobile */
@media only screen and ( max-width: 599px ) {
    .m_btn {
        display: block;
    }

    .menu {
        display: none; 
        width: 100%;
        margin-top: 1px;
    }

    .menu ul li {
        margin-top: 3px;
        margin-left: 0;
        padding: 10px 0;
        border-top: 1px solid #2d2d2d;
        float: none;
    }
}

/* Desktop */
@media only screen and ( min-width: 600px ) {
    .m_btn {
        display: none;
    }

    .menu {
        display: block !important;
    }

}
谢谢大家!

我觉得浏览器根本无法加载脚本，可能是因为它找不到脚本。我建议确保文件名的拼写与文件完全相同。如果它在同一目录中，请尝试删除第一个斜杠。此外，在大多数浏览器上打开web终端CTRL+SHIFT+I，查看控制台在错误方面的说明。

1检查打字错误$'m.btn'。。。 2在结束正文标记之前放置脚本。 3如果您在本地运行站点，请在路径中删除/before navbar.js。 Navbar.js必须与index.html文件位于同一目录中。
这一定会有帮助。

请明确解释哪些地方不正常。它应该做什么？它在干什么？您是否已打开开发人员工具并查找任何错误？它们是什么？你得到404了吗？菜单切换@zero298请同时添加你的CSS文件在Firefox中打开你的开发控制台ctrl+shift+k。您是否看到navbar.js的404？我假设您是在本地运行，而不是在服务器上运行。如果是这样的话，/navbar.js将无法找到，因为这是一条绝对路径。删除斜杠将允许您在本地查看它。控制台确实给出一个错误：加载源为“”的斜杠失败file:///navbar.js“。或者，如果你没有octo arms，你可以按F12编辑你的问题，并附上我给你的说明，这样我们就可以复制和运行该网站。我用你的说明更新了问题，如果你复制这个，让我知道它是否有效。仍然没有点。在文档就绪函数下面的外部js文件中的$'.m_btn'之前。检查插入的js和外部。好的，这就是问题所在！我修正了m.btn的打字错误，并认为这就是你所指的，但这就是问题所在。谢谢！ 
* {
    margin: 0px;
    padding: 0px;
}
.container {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

header {
    background: #ffffff;
    border-bottom: 1px solid #2d2d2d;
    padding: 30px 0;
}

.logo {
    float: left;
    font-size: 20px;
    font-weight: bold;
}

.menu {
   float: right;
}

.menu ul {

}

.menu ul li {
    float: left;
    margin-left: 40px;
    list-style-type: none;
}

.menu ul li a {
    color: #2d2d2d;
    font-size: 14px;
    text-decoration: none;
}

.menu ul li a:hover {
    color: #d2d2d2;
    text-decoration: none ;
}

.m_btn {
    float: right;
    display: block;
    width: 35px;
}

.m_btn span {
    background: #2d2d2d;
    height: 2px;
    display: block;
    margin: 5px 0;
}

/* Mobile */
@media only screen and ( max-width: 599px ) {
    .m_btn {
        display: block;
    }

    .menu {
        display: none; 
        width: 100%;
        margin-top: 1px;
    }

    .menu ul li {
        margin-top: 3px;
        margin-left: 0;
        padding: 10px 0;
        border-top: 1px solid #2d2d2d;
        float: none;
    }
}

/* Desktop */
@media only screen and ( min-width: 600px ) {
    .m_btn {
        display: none;
    }

    .menu {
        display: block !important;
    }

}