jQuery.load（）在锚链接的ID检索页面的div

我已经在我的导航菜单如下：jQuery.load（）在锚链接的ID检索页面的div

<ul> 
    <li><a href="#" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="#" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul>

它调用的jQuery：

<script type="text/javascript"> 
    $("#folio1").click(function() { 
     $('#folioWrap').load('folio1.html'); 
    }); 

    $("#folio2").click(function() { 
     $('#folioWrap').load('folio2.html'); 
    }); 
</script>

这应该更新的div＃ folioWrap，但现在它只是显示空白。所以，我有两个问题：

1 - 是否有一个根本问题，我在这里导致空白页面加载？

2 - 有没有一种方法可以编写jQuery，以便我只需要一个实例，并且可以从锚链接传递所有信息？这样我可以有大量的链接引用各种页面，而不是为每个人创建一个jQuery引用？

来源

2011-01-10 brianrhea

你们是不是要访问此你的本地计算机上（例如打开一个外部链接）？有时候会有安全问题阻止您加载本地文件 – 2011-01-10 15:38:31

不，它与服务器上的源页面位于同一目录中 – brianrhea 2011-01-10 15:40:32

它是完整的HTML页面吗？用' ...`等等？我建议在启用XHR请求记录功能的Chrome开发人员工具中打开它。然后你可以看到它是什么请求/回来 – 2011-01-10 15:41:51

我想你忘记了jQuery onload事件？

我会做的是创建要与一些CSS类加载AJAX你的锚标记。有可能会是情况下，你不想改变folioWrap内容：

<ul> 
    <li><a href="folio1.html" class="load"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" class="load"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script type="text/javascript"> 
    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      $("#folioWrap").load($(this).attr("href")); 
     }); 
    }); 
</script>

来源

2011-01-10 15:45:09 hunter

我认为你的问题的一部分可能是你在本地机器上运行它（并试图通过访问本地文件，这有时会导致问题。另一个原因可能是HTML文件是完整的，引起渲染您的浏览器问题（例如，如果它还有另一个head等），你可以通过做只加载你的页面的部分：

$("#element").load("file.html #divName");

作为使用ID而不是复制的代码，你可以这样做：

$("a").click(function() { 
    $('#folioWrap').load(this.id + '.html'); 
});

来源

2011-01-10 15:40:10

你可以在URL存储在href属性：

<ul> 
    <li><a href="folio1.html" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script> 
$("#folio1, #folio2").click(function (e) { 
    $('#folioWrap').load($(this).attr("href")); 
    e.preventDefault(); 
}); 
</script>

这具有不破坏标签式浏览的优势，它仍然禁用了javascript工作。（这两个“优势”认为它看起来并不完全打破了folio1.html或folio2.html出现在他们自己的。）

至于你用load不工作第一个问题，看看jQuery .load() not working in Chrome

来源

2011-01-10 15:42:00 Emmett

jQuery.load（）在锚链接的ID检索页面的div

回答

相关问题