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が.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

In your case, it does not work because you're trying to access a file from user computer. It poses security risks because if javascript is able to access local files, javascript is able to steal files from client machine.

Even when I reference http://www.facebook.com in the url it doesn't work

The reason for this is: AJAX requests are subject to the same-origin policy. Facebook is on another domain, that's why it does not work.

One more thing to keep in mind, some browsers think absolute URLs are cross-domain requests even if it's in the same domain, only relative Urls work, so avoid using absolute Urls.

To fix your issues, try deploying on a server and use relative URLs instead of absolute URLs.

于 2013-06-30T04:06:02.543 に答える