Question

我正在编写一个带有两个JQuery-ui组件的HTML页面：tabs和accordion。如果我在JSFiddle上尝试代码，两个组件都会正确显示。但如果我在当地尝试，他们就不会出现。

我正在使用Chrome，如果我检查源代码，我可以从源代码中打开css和js相关文件，因此路径必须正确。

我猜问题是初始化脚本。首先，我尝试使用代码来压缩另一个js文件：

        $(function() {
            $('#accordion').accordion();
            $('#results').tabs();
        }

但那没用。所以我试着把它写成HTML文件，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#accordion').accordion();
                $('#results').tabs();
            }
        </script>
    </head>

    <body>
        <div id="accordion">
            <h3>1st menu</h3>
            <div id="1stmenu-controls" class="accordion-content">
                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
            </div>
            <h3>2nd menu</h3>
            <div id="2stmenu-controls" class="accordion-content">

            </div>
            <h3>3rd menu</h3>
            <div id="3stmenu-controls" class="accordion-content">

            </div>
        </div>

        <div id="results">
            <ul>
                <li><a href="#tabs-1">Graphic results</a></li>
                <li><a href="#tabs-2">Text results</a></li>
                <li><a href="#tabs-3">Other</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.
                <img src="images/barh_demo.png" alt="Graphic results" height="300" width="400"/>
            </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>
    </body>
</html>

也没用。我想我在document.ready事件中加载jquery-ui组件时出现了一些愚蠢的错误，遗漏了一些东西。有什么帮助吗？

Answer 1

您的代码没有关闭括号。它应该看起来像：

$(function() {
    $('#accordion').accordion();
    $('#results').tabs();
});

在追踪过程中观察到了这一点。：）

Answer 2

Firebug控制台shoud throw错误（如果有错误），请检查并仔细检查jq文件路径

JQuery-ui组件未在加载时显示

2 个答案: