Question

我的导航菜单中有以下内容：

<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参考？

Answer 1

我认为您的部分问题可能是您在本地计算机上运行它（并尝试通过.load()访问本地文件，这可能会导致问题。另一个原因可能是HTML文件是一个完整的，导致浏览器在渲染中出现问题（例如，如果它有另一个head等）。您只能通过执行以下操作加载页面的一部分：

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

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

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

Answer 2

<强> 1

我想你忘记了jQuery onload事件？

<强> 2

我要做的是创建你想用一些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>

Answer 3

您可以将网址存储在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

jQuery.load（）在锚链接中通过id检索页面div

3 个答案: