jQuery根本不使用我的HTML? [英] jQuery not working with my HTML at all?

查看:123
本文介绍了jQuery根本不使用我的HTML?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以,我的jQuery并没有做任何事情,如果我用apache来做,也不能当我正常打开它。 (Chrome)



我将它链接到HTML,它连接到我的CSS,但它什么也没做。不完全确定是否因为我没有正确链接它或某事。这里是我的所有代码:(奖金问题:为什么不在比赛结果中心列表中?)



非常感谢!



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>主页< / li>< / a>
< a href =AboutMe.html>< li class =pull-me>关于我< / li>< / a>
< a href =Tournaments.html>< li class =pull-me>锦标赛结果< / li>< / a>
< a href =>< li class =pull-me>社交网络< / li>< / a>
< / ul>
< / div>
< br>
< br>
< div id =title>
< h1 align =center> Niki Stoiber< / h1>
< / div>
< p>您好,我的名字是Niki Stoiber,这是我的网页!< / p>

我是一名来自奥地利的9岁男孩,我希望有一天能成为职业网球运动员。< / 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>主页< / li>< / a>
< a href =AboutMe.html>< li class =pull-me>关于我< / li>< / a>
< a href =Tournaments.html>< li class =pull-me>锦标赛结果< / li>< / a>
< a href =>< li class =pull-me>社交网络< / li>< / a>
< / ul>
< / div>
< br>
< br>
< div id =title>
< h1 align =center>关于我< / h1>
< / div>
< div align =center>
< p>
年龄:9< br>
生日:14.4.2003< br>
我为之效力的网球俱乐部:< a href =http://better-tennis.at>更好的网球< 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>主页< / li>< / a>
< a href =AboutMe.html>< li class =pull-me>关于我< / li>< / a>
< a href =Tournaments.html>< li class =pull-me>锦标赛结果< / li>< / a>
< a href =>< li class =pull-me>社交网络< / li>< / a>
< / ul>
< / div>
< br>
< br>
< div id =title>
< h1 align =center>锦标赛结果< / h1>
< / div>
< div id =navbar>
< ul>
< li>
Anif,Salzburg:9.广场
< / li>
< li>
福拉尔贝格州Goetzis:1. Platz
< / li>
< li>
Imst,Tirol:2.广场
< / li>
< / ul>
< / div>
< / body>
< / html>

stylesheet.css:

  * {
width:auto;
height:auto;
背景颜色:#D3D3D3;
font-family:Lintel,sans-serif;
}
@ font-face {
font-family:Lintel;
src:url(./ Lintel.ttf)格式(truetype);
}
#navbar {
position:fixed;
剩下:50%;
margin-left:-254px;
}
ul {
vertical-align:auto;
list-style-type:none;
位置:固定;
margin:-5px;
text-align:center;
}
.AboutMe {
font-family:Lintel,Sans-serif;
}
ul a li {
background-color:#2F4F4F;
颜色:#FFFFFF;
border-radius:5px 5px;
边框:纯黑色;
font-family:Lintel,Sans-serif;
display:inline;
padding:5px;
z-index:1;
不透明度:0.5;
}
#title {
z-index:2;
}
a:link {
text-decoration:none;
颜色:黑色;
}
a:visited {
text-decoration:none;
颜色:黑色;
}
a:focus {
text-decoration:none;
颜色:黑色;
}
a:hover {
text-decoration:none;
颜色:黑色;
}
a:activ {
text-decoration:none;
颜色:黑色;
}
h1 {
text-align:center;
职位:亲属;
}
p {
text-align:center;
职位:亲属;
}

script.js:

  $(document).ready(function(){
$('a')。mouseenter(function(){
$(this).fadeTo ('slow',1);
});
$('a')。 b $ b})
});


解决方案

首先包括jQuery库。推荐的方式是通过Google Libs

 < script src =// ajax.googleapis.com/ajax/库/ jquery的/ 1.9.1 / jquery.min.js>< /脚本> 

至于另一个问题,您为什么期望这个列表是以中心为中心的?我没有看到任何代码。

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)
    })
});

解决方案

you're using jQuery ( the $ part ) without first including the jQuery library. The recommended way to do so is via Google Libs

<script src="//ajax.googleapis.com/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.

这篇关于jQuery根本不使用我的HTML?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆