コードはCodepenで動作しますが、私のサイトでは動作しません

私はJavascriptには本当に新しく、この問題を解決するために永遠に費やしてきました。私のコードは、私は私の[Codepen]コードはCodepenで動作しますが、私のサイトでは動作しません

$(window).on("scroll", function() { 
    if ($(window).scrollTop() > 10) { 
    $(".topnav").addClass("active"); 
    $(".mustang").addClass("active"); 
    $(".sally").addClass("active"); 
    } else { 
    $(".topnav").removeClass("active"); 
    $(".mustang").removeClass("active"); 
    $(".sally").removeClass("active"); 
    } 
}); 

function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
    x.className += " responsive"; 
    } else { 
    x.className = "topnav"; 
    } 
}

それは[私のウェブサイト]上では動作しませんが上にそれをしたいどれだけ機能します。大きな問題は、上のnavbarが私のウェブサイト上で色を変えることはないが、私のCodepenではそれが完全に変わるということです。

私はJavascriptの問題であることはほとんど確信しています。誰かが私を助けてくれたら本当に感謝しています。ありがとうございました。

出典

2017-12-01 Marco Salinas

あなたのウェブサイト上のコンソールをチェックすると（F12キーを押し、または右クリック>点検します） '$ is not defined'という単一のエラーが表示されます。これは、ページにjQueryを組み込んだとしても、ブートストラップと独自のコードの前に*最初に*来る必要があるからです。 –

ありがとう、すぐに修正！ –

"Uncaught ReferenceError：$は定義されていません"まず、jqueryライブラリをインクルードする必要があると思います。 – anil

あなたのウェブサイト上のコンソールをチェックする（F12キーを押し、または右クリック>点検）なら、あなたは、単一のエラーが表示されます：

$ is not defined

あなたはjQueryのを含めましたが、これはありますページ、それは最初に - 自分のコードの前に来る必要があります。

<head> 
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="post1.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="post1.js"></script> 
</head>

はまた、あなたがtoggleClass()を使用してaddClass()に機能を提供することで、あなたのJSのロジックを簡素化することができますのでご注意：

$(window).on("scroll", function() { 
    $('.topnav, .mustang, .sally').toggleClass('active', $(window).scrollTop() > 10) 
}); 

function myFunction() { 
    $('#myTopnav').addClass(function() { 
    return $(this).hasClass("topnav") ? 'responsive' : 'topnav'); 
    }); 
}

出典

2017-12-01 10:49:23

コードはCodepenで動作しますが、私のサイトでは動作しません

答えて

関連する問題