0

我正在编写一个带有两个 JQuery-ui 组件的 HTML 页面：选项卡和手风琴。如果我在 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 组件时犯了一些愚蠢的错误，遗漏了一些东西。有什么帮助吗？

4

2 回答 2

2

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

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

只是在追踪时观察到这一点。:)

于 2013-09-19T11:22:18.390 回答
1

Firebug 控制台应该抛出错误（如果有错误），请检查并仔细检查 jq 文件路径

于 2013-09-19T11:24:03.000 回答