Solicitação AJAX usando jQuery não funciona
Então eu sou novo no jQuery e estou tentando configurar uma página html que possui abas. Cada guia deve mostrar uma página html diferente da seguinte maneira:
<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>
Então, o que eu quero é que, quando eu clicar na página 1, page1.html será carregado emdiv.tabscontent
. Este é o código jQuery que tenho.
$(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;
});
});
Nota: 1) Eu tenho o último jquery anexado 2) Eu o page1.html, page2.html, etc estão na mesma pasta que o arquivo html acima. 3) Eu estou trabalhando localmente e tentei google-chrome, firefox e opera e todos eles tinham abas que mostravam "não funcionou". Mesmo quando eu faço referênciahttp://www.facebook.com na url não funciona. Por favor me ajude.
Eu coloquei o alerta lá para ver se o href funciona e funciona. Por exemplo, para a guia page1, ele retorna `file: ///u/b/user/Desktop/ajaxdemo/Page1.html '