Question

尝试将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>

js：

$(document).ready( function(){

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

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

    });

});

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;
    }

}

谢谢！

Answer 1

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

Answer 2

1）检查拼写错误$（'m.btn'）... 2）在关闭body标签之前放置脚本。 3）如果您在本地运行您的站点 - 删除/在路径中的navbar.js之前。 Navbar.js必须与index.html文件位于同一目录中。这必须有所帮助。

如何使用外部js文件？

2 个答案: