0

所以我是 jQuery 的新手，我正在尝试设置一个带有标签的 html 页面。每个选项卡应显示不同的 html 页面，如下所示：

<div id="tabs">
   <a href="page1.html"><div class="tabdiv tabActive">Page1</div></a>
   <a href="page2.html"><div class="tabdiv">Page2</div></a>
   <a href="page3.html"><div class="tabdiv">Page3</div> </a>
   <a href="page4.html"><div class="tabdiv">Page4</div></a>
</div>
<div class="tabscontent" id="ajax-content">
    Default text
</div>

所以我想要的是，当我点击第 1 页时，page1.html 将被加载到div.tabscontent. 这是我拥有的 jQuery 代码。

$(document).ready(function() {
    $("div#tabs a").click(function() {
                alert(this.href);
        $("#ajax-content").empty().append("Loading");
        $("div#tabs div.tabdiv").removeClass('tabActive');
        $(this).children('div.tabdiv').addClass('tabActive');

        $.ajax({ 
            url: this.href, 
            success: function(html) {
                $("#ajax-content").empty().append(html);
                alert("Success!");},
            error: function() {
                $("#ajax-content").empty().append("Didn't work");}
            });
    return false;
    });
});

注意：1）我附上了最新的 jquery 2）我 page1.html、page2.html 等与上述 html 文件位于同一文件夹中。3) 我在本地工作，尝试过 google-chrome、firefox 和 opera，它们都有显示“不起作用”的标签。即使我在 url 中引用http://www.facebook.com它也不起作用。请帮我。

我把警报放在那里看看href是否有效并且它确实有效。例如对于 page1 选项卡，它返回 `file:///u/b/user/Desktop/ajaxdemo/Page1.html'

4

1 回答 1

2

在您的情况下，它不起作用，因为您试图从用户计算机访问文件。它会带来安全风险，因为如果 javascript 能够访问本地文件，则 javascript 就能够从客户端计算机窃取文件。

即使我在网址中引用http://www.facebook.com它也不起作用

这样做的原因是：AJAX 请求受同源策略的约束。Facebook 在另一个域上，这就是它不起作用的原因。

还要记住一件事，一些浏览器认为绝对 URL 是跨域请求，即使它在同一个域中，只有相对 URL 有效，所以避免使用绝对 URL。

要解决您的问题，请尝试在服务器上部署并使用相对 URL 而不是绝对 URL。

于 2013-06-30T04:06:02.543 回答