jQueryUI ajax 选项卡示例不起作用答案

【问题标题】：The jQueryUI ajax tabs example doesn't workjQueryUI ajax 选项卡示例不起作用
【发布时间】：2011-07-07 02:54:14
【问题描述】：

我正在使用 jQueryUI，使用开发包，但有问题。因此，我正在尝试另一种方法。

在此处查看示例： http://jqueryui.com/demos/tabs/ajax.html

单击“选项卡 2”和“选项卡 3”。一切正常。

现在，我查看了 html 源代码并将其复制到本地文件中，并将所有相对路径替换为绝对路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs - Content via Ajax</title>

    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">

    <script src="http://jqueryui.com/jquery-1.5.1.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>

    <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>

        <li><a href="http://jqueryui.com/demos/tabs/ajax/content1.html">Tab 1</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab 2</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="http://jqueryui.com/demos/tabs/ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->

</body>
</html>

现在复制此 HTML，将其粘贴到本地 .html 文件中，然后在浏览器中查看。

当我点击本地文件的“Tab 2”和“Tab 3”时，会出现“无法加载此选项卡”错误，这意味着它找不到那些 content1.html 和 content2.html 文件 -但这些确实存在并且有内容：

http://jqueryui.com/demos/tabs/ajax/content1.html （和 content2.html）

我在这里吃药吗？有人可以解释一下我做错了什么吗？

附带说明：这个问题最初是在本地执行我的 jQueryUI 示例时弹出的，我认为它不喜欢本地 html 文件的相对路径。上面的这个例子表明它是另外一回事。

附言我在 Firefox（Ubuntu、Windows）和 IE（Windows）中尝试了这个测试。同样的问题。

提前感谢您的帮助。

【问题讨论】：

标签： jquery ajax jquery-ui tags

【解决方案1】：

这是因为这两个选项卡是由 ajax 请求加载的，而您的本地副本没有权限/授权对 jquery ui 的站点执行 ajax 请求。

一般情况下，由于same origin policy，您无法发送跨域ajax 请求。它说 -

该策略允许在源自同一站点的页面上运行的脚本无特定限制地访问彼此的方法和属性，但禁止跨不同站点的页面访问大多数方法和属性。

【讨论】：