Question

我刚刚下载了jQuery UI标签。在包含的index.html文件中，它工作正常，CSS和所有，没有自定义。我将文件复制到我的Web服务器，保持目录结构不变，并将内容代码复制到我已存在的index.html，但它不起作用。

我的标头代码

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<link type="text/css" href="css/start/jquery-ui-1.8.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();              
});
</script>

我的正文代码

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>

我的输出

* First
* Second
* Third
Lorem ipsum dolor sit amet， consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 商品问题。菜豆（Phasellus mattis） tincidunt nibh。 Cras orci urna， blandit id，pretium vel，aliquet ornare，felis。 Maecenas scelerisque sem non nisl。在enim fusce sed lorem 格言bibendum。 Nam dui erat，auctor a，dignissim quis，sollicitudin eu，猫。 Pellentesque nisi urna， interdum eget，sagittis et，consequat 前庭，拉克斯。 Mauris porttitor ullamcorper augue。

所有文件都被正确引用，并且直接从一个功能齐全的文件中复制和粘贴。，但它不起作用。

Answer 1

删除第90行的jQuery引用。（我在Freenode IRC网络上收到#jQuery的帮助）

Answer 2

根据您的网站进行更新 - jQuery 1.3将在稍后的页面中包含在这里搞砸了狗:)搜索并删除它，因此它没有加载两次/搞乱jQuery UI：

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

以前的回答 - 如果这对其他人稍后调试很有帮助

尝试用以下内容替换脚本部分：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<script type="text/javascript">
  $(function(){
    $('#tabs').tabs();              
  });
</script>

不是在服务器上查找脚本/ css，而是查看Google的CDN。如果可行，那么您的脚本文件未被正确引用，文件权限，或者更可能是不正确的相对路径......或其他内容。在任何情况下，相对于该页面中的js/，它们都无法访问。

如果文件位于mysite.com/js，请使用/js/而不是js/，以便链接相对于网站根目录。

Answer 3

使用Web开发人员工具栏（如Firebug或IE Developer Toolbar或Chrome附带的任何工具栏）查看对您的javascript和css文件的HTTP响应。您上面发布的相对网址可能不正确。如果是这样，那么您将看到404响应，在这种情况下，您应该测试http://yoursite.com/js/jquery-1.4.2.min.js确实返回所需的内容。如果它是401响应，那么您可能没有正确的文件权限。

HTH。

更新：我可以访问javascript和css文件。您正在测试的页面的URL是什么？

jQuery UI选项卡不起作用

3 个答案: