admin管理员组文章数量:1290059
So, my jQuery doesn't do anything, neither if I do it with apache nor when I open it normally. (Chrome)
I linked it in the HTML, which is connected to my CSS, but it just doesn't do anything. Not entirely sure if that is because I didn't link it correctly or something. Here's all my code: (Bonus question: Why isn't the list at Tournament Results Centered on the page?)
Thanks a lot guys!
Home.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='http://localhost/Niki/script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Niki Stoiber</h1>
</div>
<p>Hey there, my name is Niki Stoiber, and this is my Webpage!</p>
<p>I am a 9 year old boy from Austria and I want to be a professional tennisplayer someday.</p>
</body>
</html>
AboutMe.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">About Me</h1>
</div>
<div align="center">
<p>
Age: 9 <br>
Birthday: 14.4.2003 <br>
Tennis Club I play for: <a href=""> Better Tennis <br>
<img src=""/></a>
</p>
</div>
</body>
</html>
Tournaments.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Tournament Results</h1>
</div>
<div id="navbar">
<ul>
<li>
Anif, Salzburg: 9. Platz
</li>
<li>
Goetzis, Vorarlberg: 1. Platz
</li>
<li>
Imst, Tirol: 2. Platz
</li>
</ul>
</div>
</body>
</html>
stylesheet.css:
* {
width:auto;
height:auto;
background-color:#D3D3D3;
font-family:"Lintel", sans-serif;
}
@font-face {
font-family: "Lintel";
src: url("./Lintel.ttf") format("truetype");
}
#navbar {
position:fixed;
left:50%;
margin-left:-254px;
}
ul {
vertical-align:auto;
list-style-type:none;
position:fixed;
margin:-5px;
text-align:center;
}
.AboutMe {
font-family:"Lintel", Sans-serif;
}
ul a li {
background-color:#2F4F4F;
color:#FFFFFF;
border-radius:5px 5px;
border:solid black;
font-family:"Lintel", Sans-serif;
display:inline;
padding:5px;
z-index:1;
opacity: 0.5;
}
#title {
z-index:2;
}
a:link {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:black;
}
a:focus {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:black;
}
a:activ {
text-decoration:none;
color:black;
}
h1 {
text-align:center;
position:relative;
}
p {
text-align:center;
position:relative;
}
script.js:
$(document).ready(function() {
$('a').mouseenter(function(){
$(this).fadeTo('slow', 1);
});
$('a').mouseleave(function() {
$(this).fadeTo('slow', 0.5)
})
});
So, my jQuery doesn't do anything, neither if I do it with apache nor when I open it normally. (Chrome)
I linked it in the HTML, which is connected to my CSS, but it just doesn't do anything. Not entirely sure if that is because I didn't link it correctly or something. Here's all my code: (Bonus question: Why isn't the list at Tournament Results Centered on the page?)
Thanks a lot guys!
Home.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='http://localhost/Niki/script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Niki Stoiber</h1>
</div>
<p>Hey there, my name is Niki Stoiber, and this is my Webpage!</p>
<p>I am a 9 year old boy from Austria and I want to be a professional tennisplayer someday.</p>
</body>
</html>
AboutMe.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">About Me</h1>
</div>
<div align="center">
<p>
Age: 9 <br>
Birthday: 14.4.2003 <br>
Tennis Club I play for: <a href="http://better-tennis.at"> Better Tennis <br>
<img src="http://bit.ly/WpoXB1"/></a>
</p>
</div>
</body>
</html>
Tournaments.html:
<!DOCTYPE html>
<html>
<head>
<title>Niki Stoiber</title>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="navbar">
<ul>
<a href="Home.html"><li class="pull-me">Home</li></a>
<a href="AboutMe.html"><li class="pull-me">About Me</li></a>
<a href="Tournaments.html"><li class="pull-me">Tournament Results</li></a>
<a href=""><li class="pull-me">Social Networks</li></a>
</ul>
</div>
<br>
<br>
<div id="title">
<h1 align="center">Tournament Results</h1>
</div>
<div id="navbar">
<ul>
<li>
Anif, Salzburg: 9. Platz
</li>
<li>
Goetzis, Vorarlberg: 1. Platz
</li>
<li>
Imst, Tirol: 2. Platz
</li>
</ul>
</div>
</body>
</html>
stylesheet.css:
* {
width:auto;
height:auto;
background-color:#D3D3D3;
font-family:"Lintel", sans-serif;
}
@font-face {
font-family: "Lintel";
src: url("./Lintel.ttf") format("truetype");
}
#navbar {
position:fixed;
left:50%;
margin-left:-254px;
}
ul {
vertical-align:auto;
list-style-type:none;
position:fixed;
margin:-5px;
text-align:center;
}
.AboutMe {
font-family:"Lintel", Sans-serif;
}
ul a li {
background-color:#2F4F4F;
color:#FFFFFF;
border-radius:5px 5px;
border:solid black;
font-family:"Lintel", Sans-serif;
display:inline;
padding:5px;
z-index:1;
opacity: 0.5;
}
#title {
z-index:2;
}
a:link {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:black;
}
a:focus {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:black;
}
a:activ {
text-decoration:none;
color:black;
}
h1 {
text-align:center;
position:relative;
}
p {
text-align:center;
position:relative;
}
script.js:
$(document).ready(function() {
$('a').mouseenter(function(){
$(this).fadeTo('slow', 1);
});
$('a').mouseleave(function() {
$(this).fadeTo('slow', 0.5)
})
});
- 7 You need to reference the jQuery library -- developers.google./speed/libraries/devguide – tymeJV Commented Feb 27, 2013 at 14:07
- Are you sure you referenced the jquery from your pages? just add this to your headers: <script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script> – Y2theZ Commented Feb 27, 2013 at 14:09
- Btw the best additional tip is to use.. html5boilerplate. well build framework for all your markup... Put scripts at the bottom, and use the right meta tags and so on And as @tymeJV says ref jquery lib – Simon Dragsbæk Commented Feb 27, 2013 at 14:16
3 Answers
Reset to default 5you're using jQuery ( the $ part ) without first including the jQuery library. The remended way to do so is via Google Libs
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
as for the other question, why did you expect the list to be centered? I don't see any code for that.
It seems you forgot to import the jQuery library. Add this
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
inside your head tag
CHANGE
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
TO
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>
本文标签： javascriptjQuery not working with my HTML at allStack Overflow
版权声明：本文标题：javascript - jQuery not working with my HTML at all? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741490475a2381596.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论