My Jquery/Javascriptが接続されません！ - HTMLで動作 - プログラミングに新しい

Question

私のjquery/javascriptがロードされたWebページに表示されない理由を理解できません。 私はそれを実際のHTMLファイルに入れます。

毎回、js、jqueryファイルをリンクしようとすると失敗します。わかりません。助けてください！！

NMC

$(document).ready(function(){ 
 

 
window.onload=function(){ 
 
$('#one').hide(); 
 
$('#two').hide(); 
 
$('#three').hide(); 
 

 
}); 
 

 
$(function() { 
 
    
 
    $("#menu-circle").on("mouseenter", function() { 
 
\t var i = $(this).index(); 
 
\t $("#one").eq(i) 
 
\t .show().siblings().hide(); 
 
    }); 
 
    
 
$("#menu-circle1").on("mouseenter", function() { 
 
\t var i = $(this).index(); 
 
\t $("#two").eq(i) 
 
\t .show().siblings().hide(); 
 
    }); 
 

 
$("#menu-circle3").on("mouseenter", function() { 
 
\t var i = $(this).index(); 
 
\t $("#three").eq(i) 
 
\t .show().siblings().hide(); 
 
    }); 
 
    
 
$('html,body').animate({ scrollTop: 9999 }, 'slow'); 
 
}); 
 
} 
 

 
}); 
 
} 
 

 
}); 
 
}

#one { 
 
\t text-decoration: none; 
 
\t font-size: 100px; 
 
\t height: 50%; 
 
\t width: 80%; 
 
\t margin-top: 20%; 
 
\t position: fixed; 
 
\t padding-left: 30px; 
 
\t padding-right: 30px; 
 
\t padding-top: 10%; 
 
\t vertical-align: middle; 
 
\t margin-right: 50%; 
 
\t justify-content: left; 
 
\t color: rgba(255, 255, 255, 0.62); 
 
\t z-index: 1; 
 
\t background-color:rgba(109, 104, 104, 0.54) 
 
} 
 

 
#two { 
 
\t text-decoration: none; 
 
\t font-size: 100px; 
 
\t height: 50%; 
 
\t width: 80%; 
 
\t margin-top: 20%; 
 
\t position: fixed; 
 
\t padding-left: 30px; 
 
\t padding-right: 30px; 
 
\t padding-top: 10%; 
 
\t vertical-align: middle; 
 
\t margin-right: 50%; 
 
\t justify-content: left; 
 
\t color: rgba(255, 255, 255, 0.62); 
 
\t z-index: 1; 
 
\t background-color:rgba(109, 104, 104, 0.54) 
 
} 
 
\t 
 
#three { 
 
\t text-decoration: none; 
 
\t font-size: 100px; 
 
\t height: 50%; 
 
\t width: 80%; 
 
\t margin-top: 20%; 
 
\t position: fixed; 
 
\t padding-left: 30px; 
 
\t padding-right: 30px; 
 
\t padding-top: 10%; 
 
\t vertical-align: middle; 
 
\t margin-right: 50%; 
 
\t justify-content: left; 
 
\t color: rgba(255, 255, 255, 0.62); 
 
\t z-index: 1; 
 
\t background-color:rgba(109, 104, 104, 0.54) 
 
} 
 

 
.wrapper { 
 
\t width: 100%; 
 
\t height: 2500px; 
 
\t margin-top: -30px; 
 
\t background-image: url("joaquinmiller.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center center; 
 
\t background-size: cover; 
 
\t filter: grayscale (100%); 
 
\t -webkit-filter: grayscale(100%); 
 
\t filter: grayscale(100%); 
 
} 
 

 
.wrapper:hover { 
 
    -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
} 
 

 
.menunav { 
 
    cursor: pointer; 
 
    display: inline; 
 
    position: fixed; 
 
    z-index: 1; 
 
    margin-left: 90%; 
 
    margin-top: 40%; 
 
} 
 

 
#menu-circle { 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background: gray; 
 
\t -moz-border-radius: 50%; 
 
\t -webkit-border-radius: 50%; 
 
\t border-radius: 50%; 
 
\t margin: auto; 
 
\t margin-top: 20px; 
 
\t opacity: 1.0; 
 
} 
 

 
.menu-text { 
 
\t text-align: center; 
 
    \t text-decoration: none; 
 
\t font-family: 'Oswald', sans-serif; 
 
\t font-weight:700; 
 
\t letter-spacing: .07em; 
 
\t opacity: 1; 
 
} 
 

 
.menu-item:hover #menu-circle{ 
 
    background:yellow; 
 
    opacity: 1.0; 
 
} 
 

 
.menu-item:hover .menu-text{ 
 
    text-decoration: none; 
 
    color: yellow; 
 
    opacity: 1.0; 
 
    text-decoration: none; 
 
} 
 

 
#menu-circle1 { 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background: gray; 
 
\t -moz-border-radius: 50%; 
 
\t -webkit-border-radius: 50%; 
 
\t border-radius: 50%; 
 
\t margin: auto; 
 
\t margin-top: 20px; 
 
\t opacity: 1.0; 
 
} 
 

 
.menu-text1 { 
 
\t text-align: center; 
 
    \t text-decoration: none; 
 
\t font-family: 'Oswald', sans-serif; 
 
\t font-weight:700; 
 
\t letter-spacing: .07em; 
 
\t opacity: 1; 
 
} 
 

 
.menu-item1:hover #menu-circle1 { 
 
    background:yellow; 
 
    opacity: 1.0; 
 
} 
 

 
.menu-item1:hover .menu-text1 { 
 
    text-decoration: none; 
 
    color: yellow; 
 
    opacity: 1.0; 
 
    text-decoration: none; 
 
} 
 

 
#menu-circle3 { 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background: gray; 
 
\t -moz-border-radius: 50%; 
 
\t -webkit-border-radius: 50%; 
 
\t border-radius: 50%; 
 
\t margin: auto; 
 
\t margin-top: 20px; 
 
\t opacity: 1.0; 
 
} 
 

 
.menu-text1 { 
 
\t text-align: center; 
 
    \t text-decoration: none; 
 
\t font-family: 'Oswald', sans-serif; 
 
\t font-weight:700; 
 
\t letter-spacing: .07em; 
 
\t opacity: 1; 
 
} 
 

 
.menu-item3:hover #menu-circle3 { 
 
    background:yellow; 
 
    opacity: 1.0; 
 
} 
 

 
.menu-item1:hover .menu-text1 { 
 
    text-decoration: none; 
 
    color: yellow; 
 
    opacity: 1.0; 
 
    text-decoration: none; 
 
} 
 

 

 
.topcontainer { 
 
\t position: !important; 
 
\t width: 100%; 
 
\t filter: grayscale(100%) 
 
} 
 

 
.topcontainer:hover { 
 
\t filter: grayscale(0%) 
 
} 
 

 
button { 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t border-style: none; 
 
\t color: white; 
 
\t font-size: 15px; 
 
} 
 

 
button p { 
 
\t font-size: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
<meta name="viewport" content="width=device-width, intial-scale=1"> 
 
<title>FINAL</title> 
 
<link rel="stylesheet" type="text/css" href="evenmorepractice.css"> 
 
<link rel="stylesheet" type="text/css" href="normalize.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
<header> 
 

 
</header> 
 

 
<div class="menunav"> 
 
\t \t <div class="menu-item"> 
 
\t \t \t <div id="menu-circle"></div> 
 
\t \t </div> 
 
\t 
 
\t \t <div class="menu-item1"> 
 
\t \t \t <div id="menu-circle1"></div> 
 
     </div> 
 
    
 
\t \t <div class="menu-item3"> 
 
\t \t \t <div id="menu-circle3"></div> 
 
     </div> 
 
\t </div> 
 
    \t 
 
    <article> 
 
\t  \t <p id="one">Neighborhoods<button><p>click</p></button></p> 
 
\t \t \t <p id="two">History<button>click</button></p> 
 
\t \t \t <p id="three">Housing Crisis<button>readmore</button></p> 
 
\t </article> 
 

 

 
<div class"whitenav">whitenav</div> 
 
\t <div class="wrapper"> 
 
\t <p class="oakland">OAKLAND</p> 
 
</div> 
 

 
<script src="script.js"></script> 
 

 
</body> 
 
</html>

Answer 1

あなたは、htmlファイルの頭の中であなたのスクリプトを参照する必要があります。だから、右のあなたはjqueryのを追加するタグの下に、あなたはこれを追加する必要があります。

<script src="path\to\your\js\file"></script> 

Answer 2

あなたのJSファイルは本当にめちゃくちゃですが、私はこれはあなたが...

  $(function() { 

       $('#one').hide(); 
       $('#two').hide(); 
       $('#three').hide(); 

       $("#menu-circle").on("mouseenter", function() { 
        var i = $(this).index(); 
        $("#one").eq(i) 
        .show().siblings().hide(); 
       }); 

       $("#menu-circle1").on("mouseenter", function() { 
        var i = $(this).index(); 
        $("#two").eq(i) 
        .show().siblings().hide(); 
       }); 

       $("#menu-circle3").on("mouseenter", function() { 
        var i = $(this).index(); 
        $("#three").eq(i) 
        .show().siblings().hide(); 
       }); 

       $('html,body').animate({ scrollTop: 9999 }, 'slow'); 

      });