JQuery加载但不起作用

正在测试一些JQuery的东西（我是新来的），但我不能让jQuery的工作！首先它工作了两三次，然后停止工作（非常奇怪），所以我改变了一些东西，现在它根本不工作。 jQuery和负载的script.js，但似乎并没有工作JQuery加载但不起作用

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="jquery-2.1.4.min.js" type="text/javascript"></script> 
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" /> 
     <link href="main.css" rel="stylesheet" type="text/css" /> 
     <script src="script.js" type="text/javascript"></script> 
     <title>Manuel Pepe</title> 
    </head> 
    <body> 
     <div id="nav-bar" class="nav-bar"> 
      <div id="container"> 
       <img id="nav-button" class="nav-button" src="imgs/menu.png" /> 
       <div id="nav-menu" class="nav-menu"> 
       </div> 
      </div> 
     </div> 
     <div class="front-page"> 
      <div class="logo"> 
       <h1>Manuel Pepe</h1> 
       <h3>Test</h3> 
      </div> 
     </div> 
    </body> 
</html>

的main.css

html{ 
position:relative; 
height:100%; 
background-color: #6E6E6E; 
} 

#container{} 

.nav-button{ 
    position:absolute; 
    margin-top: -2px; 
    margin-left: 7px; 
    width: 32px; 
    height: auto; 
    z-index:1; 
} 

.nav-menu{ 
    background-color:#424242; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width: 200px; 
    height:100%; 
} 

.logo{ 
    position: relative; 
    top:250px; 
    left:0; 
    right:0; 
    bottom:0; 
    margin: auto; 
    width: 225px; 
} 

.logo h3, h1{ 
    text-align:center; 
    font-family: Sansita One; 
    color: #222; 
    text-shadow: 0px 2px 3px #555; 
} 

.logo h1{ 
    margin-bottom: 3px; 
} 

.logo h3{ 
    margin-top: 2px; 
} 

.hover-rotate:hover { 
    -ms-transform: rotate(-180deg); 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 

}

的script.js

为什么不能正常工作？

另外，有没有什么办法来改进JQuery代码？

来源

2015-05-19 Manuel Pepe

您是否看到任何控制台错误？ – karthikr

如果真的加载了jquery-2.1.4.min.js，请检查控制台和源代码。 –

“不起作用”是什么意思？你是如何测试它的？ – feeela

可以使用$()构造函数，而不是$(document).ready(function(){...：

$(function() { 

    $("#nav-button").mouseover(function(){ 
     $(this).addClass("hover-rotate"); 
    }); 
    $("#nav-button").mouseleave(function(){ 
     $(this).removeClass("hover-rotate") 
    }) 

});

来源

2015-05-19 15:05:13

设置你的JavaScript内超时符合条件像

if (typeof jQuery != "undefined")

来源

2015-05-19 15:14:44 loli

为什么超时？他怎么知道页面加载的时间？使用事件而不是任意超时 –

似乎当我测试它是工作的罚款。看到这个JSFiddle：https://jsfiddle.net/v1t54urc/2/

你确定你的jQuery被加载？还要确保你的CSS加载正确。尝试在标头中使用以下代码以确保：

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

还有一件事。别忘了;在上的代码，这样的结尾：

$("#nav-button").mouseleave(function(){ 
    $(this).removeClass("hover-rotate"); 
});

来源

2015-05-19 15:31:22 Treps

更改线路，以确保jQuery是正确加载：

<script src="jquery-2.1.4.min.js" type="text/javascript"></script>

通过

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

如果你做的修改和网络工程，旧的行无法找到文件夹中的“jquery-2.1.4.min.js”。

来源

2015-05-19 15:31:22 JoanR

JQuery加载但不起作用

回答

相关问题