3

所以,我的 jQuery 没有做任何事情,无论是使用 apache 还是正常打开它时。(铬合金)

我将它链接到与我的 CSS 相连的 HTML 中,但它什么也没做。不完全确定这是因为我没有正确链接它还是什么。这是我所有的代码:(奖励问题:为什么锦标赛结果中的列表不在页面中心?)

非常感谢你们!

主页.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>

关于我.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>

锦标赛.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>

样式表.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;
}

脚本.js:

$(document).ready(function() {
    $('a').mouseenter(function(){
        $(this).fadeTo('slow', 1);
    });
    $('a').mouseleave(function() {
        $(this).fadeTo('slow', 0.5)
    })
});
4

3 回答 3

5

您正在使用 jQuery( $ 部分)而没有首先包含 jQuery 库。推荐的方法是通过 Google Libs

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

至于另一个问题,您为什么希望列表居中?我没有看到任何代码。

于 2013-02-27T14:10:02.207 回答
3

看来您忘记导入 jQuery 库了。添加这个

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

在你的头标签内

于 2013-02-27T14:10:20.640 回答
2

改变

<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>

<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>
于 2013-02-27T14:12:22.947 回答