我编写了html / css代码,然后添加了另一个文件来包含jquery库和我自己的js代码(在文件scripts.js
中)。
如果我将代码保存在单独的scripts.js文件中,则代码无法正常工作,但如果我将其应用于<scripts></script>
中的index.html
元素,则该代码无效。
为什么会这样,我该如何解决这个问题?
我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts.js" type='text/javascript'></script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li><a href="#intro"> Introductie </a></li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
<a href="#wrapper"> To the top! </a>
</footer>
</div>
</body>
</html>
浏览器控制台日志:
SyntaxError:意外的令牌&#39;)&#39;。预计开幕式(&#39;之前) 函数的参数列表。
但它确实有效,如果我这样做:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('content').hide();
});
</script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li><a href="#intro"> Introductie </a></li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
<a href="#wrapper"> To the top! </a>
</footer>
</div>
</body>
</html>
答案 0 :(得分:2)
你在功能
后缺少括号$(document).ready(function(){
$("#content").hide();
});
答案 1 :(得分:1)
你的语法似乎是正确的(好吧,是的,你已经解决了这个问题)。然而你的jQuery选择器是错误的。为了通过它的id隐藏html元素,你需要#
前缀。话虽这么说,你的.hide()
应该是这样的:
$('#content').hide();
而且,这里是整个片段:
$(document).ready(function() {
$('#content').hide();
});
答案 2 :(得分:-1)
正确的语法是:
$(document).ready(function(){
$("#content").hide();
});