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 ref？

我想部分问题可能是您在本地计算机上运行它，并试图通过.load访问本地文件，这有时会导致问题。另一个原因可能是HTML文件已满，导致浏览器在呈现时出现问题，例如，如果它有另一个标头等。您可以通过执行以下操作仅加载页面的一部分：

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

至于使用ID而不是复制代码，您可以这样做：

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

---

我认为部分问题可能是您在本地计算机上运行它，并试图通过.load访问本地文件，这有时会导致问题。另一个原因可能是HTML文件已满，导致浏览器在呈现时出现问题，例如，如果它有另一个标头等。您可以通过执行以下操作仅加载页面的一部分：

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

至于使用ID而不是复制代码，您可以这样做：

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

---

您可以将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单独出现看起来不会完全崩溃

---

关于加载不工作的第一个问题，请查看您可以将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单独出现看起来不会完全崩溃

关于负载不工作的第一个问题，请查看

我想你忘了jQuery onload事件了

二,

我要做的是创建锚定标记，您希望用一些css类加载ajax。在某些情况下，您可能不想更改FolioRap内容，例如：打开外部链接

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

一,

我想你忘了jQuery onload事件了

二,

我要做的是创建锚定标记，您希望用一些css类加载ajax。在某些情况下，您可能不想更改FolioRap内容，例如：打开外部链接

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

---

您正在本地计算机上尝试访问此文件吗？有时会出现安全问题，阻止您加载本地文件否，它与服务器上的源页面位于同一目录中是完整的HTML页面吗？具有等我建议在启用XHR请求日志记录的Chrome开发者工具中打开它。然后您可以查看它请求/返回的内容。您是否尝试在本地计算机上访问它？有时会出现安全问题，阻止您加载本地文件否，它与服务器上的源页面位于同一目录中是完整的HTML页面吗？具有等我建议在启用XHR请求日志记录的Chrome开发者工具中打开它。然后您可以看到它请求/返回的内容。我可以建议使用本机方式访问id吗？像这样：$'folioWrap'.loadthis.id+'.html'谢谢：今天不太合适。我可以建议使用本机方式访问id吗？像这样：$'folioWrap'.loadthis.id+'.html'谢谢：今天不太合适。您不需要在单击处理程序中返回false吗？@Yads我选择e.preventDefault而不是返回false，因为它不会停止事件传播。@Yads，是的！或是打个好电话。我忘了添加那一行。您不需要在单击处理程序中返回false吗？@Yads我选择e.preventDefault而不是返回false，因为它不会停止事件传播。@Yads，是的！或是打个好电话。我忘了加那一行。