在 HTML 页面上包含 JS 文件的问题答案

【问题标题】：Problem with including JS files on a HTML page在 HTML 页面上包含 JS 文件的问题
【发布时间】：2010-07-27 20:21:06
【问题描述】：

我正在尝试使用工具提示 jQuery 插件。这是我在<head> 的index.html 中拥有的：

<head>
    <title>Index</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
    <script src="js/homepage.js" type="text/javascript"></script>
</head>

这是在js/homepage.js:

$(document).ready(function() {
    // meaningless functions

    $('.supported_hosts').simpletip({
        fixed: true,
        position: 'right',
        content: 'test content.'
    });
});

但由于某种原因，工具提示没有显示。但它确实显示了我是否在索引页面上包含工具提示功能。有没有办法让这个工作没有索引页面上的工具提示功能，但在外部文件中？谢谢。

【问题讨论】：

我想知道你的js文件是否在其他地方有错误？您可以发布整个文件或仔细检查您在其他地方没有错误吗？
尝试将defer="defer" 添加到您的 js/homepage.js 脚本标签中。
已经有了，您可以放心地假设其他任何地方都没有错误。我也用 Console2 和 Firebug 进行了检查。
当您的代码位于外部文件中时，您是否看到任何 JavaScript 错误？
好的做法是让 Robusto 提供评论作为答案，让 Prupper 接受它。这样这个问题就不会一直“悬而未决”。

标签： javascript jquery plugins tooltip

【解决方案1】：

我从未使用过最简单的插件，但我复制并粘贴了您的标题和 js 代码，一切似乎都运行良好。

我链接到最新版本的 jquery 并下载了 simpletip.js 的新副本，并且在第一次尝试时就可以使用。

唯一的区别是/也许： - 我不知道您在 html 中调用“supported_hosts”类的代码是什么样的。 - simpletip.js 文件的名称我在下载时没有更改，所以我会检查您的文件名和相对位置。

抱歉，没有更多内容，但您为我工作的内容，这是我完整使用的代码，以防对您有所帮助：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Index</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
    <script src="homepage.js" type="text/javascript"></script>
</head>

<body>
     <span class="supported_hosts">Tool Tips here</span>
</body>
</html>

您提供的Javascript：

$(document).ready(function() {
    // meaningless functions

    $('.supported_hosts').simpletip({
        fixed: true,
        position: 'right',
        content: 'test content.'
    });
});

我在这里下载了 simpletip.js： http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=

我会仔细检查您的相对路径和类命名。你的代码看起来不错。

【讨论】：

【解决方案2】：

移动

<script src="homepage.js" type="text/javascript"></script>

到正文的结尾好像解决了问题：

<body>

[code...]

<script src="homepage.js" type="text/javascript"></script>

</body>

【讨论】：