Javascript Codepen JQuery代码不'；我的浏览器不工作_Javascript_Jquery_Html_Css

Javascript Codepen JQuery代码不'；我的浏览器不工作

javascript jquery html css

Javascript Codepen JQuery代码不'；我的浏览器不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在网上搜索这个问题的解决方案已经有一段时间了。不幸的是，没有运气。这是我使用代码的网站这是我的密码： HTML- <!DOCTYPE html> <html lang="en"> <head> <script src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="script.js"><

我在网上搜索这个问题的解决方案已经有一段时间了。不幸的是，没有运气。这是我使用代码的网站

这是我的密码：

HTML-

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <link href="main.css" rel="stylesheet" type="text/css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
    </head>

    <body>

        <header class="main_h">

            <div class="row">
                <a class="logo" href="#">L/F</a>

                <div class="mobile-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <nav>
                    <ul>
                        <li><a href=".sec01">Section 01</a></li>
                        <li><a href=".sec02">Section 02</a></li>
                        <li><a href=".sec03">Section 03</a></li>
                        <li><a href=".sec04">Section 04</a></li>
                    </ul>
                </nav>

            </div> <!-- / row -->

        </header>

        <div class="hero">

            <h1><span>loser friendly</span><br>Batman nav.</h1>

            <div class="mouse">
                <span></span>
            </div>

        </div>

        <div class="row content">
            <h1 class="sec01">Section 01</h1>
            <p>Hello World!</p>
            <h1 class="sec02">Section 02</h1>
            <p>Hello World!</p>
            <h1 class="sec03">Section 03</h1>
            <p>Hello World!</p>
            <h1 class="sec04">Section 04</h1>
            <p>Hello World!</p>
        </div>
    </body>

</html>

JS:

HTML和CSS工作正常，但JQuery给我带来了问题。

尝试将代码包装到JQuery document ready事件中

$(document).ready(function(){
    //event listeners
});

控制台有错误吗？在

ready

ready

函数中包装代码可能会解决您的问题，或者将您的javascript放在

之前，以便加载内容。“给我问题”不是问题描述。

$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('.main_h').addClass('sticky');
    } else {
        $('.main_h').removeClass('sticky');
    }
});

$('.mobile-toggle').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.main_h').removeClass('open-nav');
    } else {
        $('.main_h').addClass('open-nav');
    }
});

$('.main_h li a').click(function() {
    if ($('.main_h').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_h').removeClass('open-nav');
    }
});

$('nav a').click(function(event) {
    var id = $(this).attr("href");
    var offset = 70;
    var target = $(id).offset().top - offset;
    $('html, body').animate({
        scrollTop: target
    }, 500);
    event.preventDefault();
});

$(document).ready(function(){
    //event listeners
});