HTML / CSS / JS初学者错误

Question

这些工作在我JSFiddle的答案中andi original question {{3}}。我很难过，因为它不能在浏览器中运行。我知道这将是一个非常简单的修复。提前谢谢。

HTML：                         

<div class="blackwrap">
    <header class="blackbar">
        <h2>Before he knew it, he couldn't see a thing.</h2>
        <h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
    </header>
</div> <!-- .blackwrap-->    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>

CSS：

.blackbar {
    background: black;
    color: white;
}
.blackbar.lit {
    background:yellow;
    color:black;
}

使用Javascript：

$("#flash").on("mouseover", function(){
    $(".blackbar").addClass("lit");
}).on("mouseout", function(){
    $(".blackbar").removeClass("lit")
});

Answer 1

你的jquery没有正确加载使用src中的 http：，如下所示：

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

Answer 2

问题可能是，您使用file://协议在本地计算机上运行Jquery包含代码。

所以在你的本地机器上使用

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

在服务器上更改为

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在服务器上，它将是http:或https:，因此服务器会自动选择相应的。

Answer 3

它在jnery的cdn链接中的非常简单的修复你应该进行http调用

而不是

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

将其更改为此

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

问题是如果你不保留http浏览器认为它是你电脑中的本地文件。