使用jQuery将内容加载到Div中

Question

我希望您能够使用jQuery实现在点击时将外部页面加载到DIV中的轻量级方法。

例如：

<a href="#" onclick="jQuery Load Function with unique ID 1">Load Page 1</a>
<a href="#" onclick="jQuery Load Function with unique ID 2">Load Page 2</a>
<a href="#" onclick="jQuery Load Function with unique ID 3">Load Page 3</a>
<a href="#" onclick="jQuery Load Function with unique ID 4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>

非常感谢您的帮助！

谢谢！

- user580523

---

jQuery有很好的文档：http://api.jquery.com/ 建议查看一下。 - Felix Kling

Answer 1

<a href="#" onclick="load(1);return false;">Load Page 1</a>
<a href="#" onclick="load(2);return false;">Load Page 2</a>
<a href="#" onclick="load(3);return false;">Load Page 3</a>
<a href="#" onclick="load(4);return false;">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>
<script>
function load(num){
   $("#LoadMe").load('page'+num+'.php');
}
</script>

http://api.jquery.com/load/

- genesis

---

链接已损坏。 - Leo Gurdian

Answer 2

<a href="/page1">Load Page 1</a>
<a href="/page2">Load Page 2</a>
<a href="/page3">Load Page 3</a>
<a href="/page4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>

$('a').click(function() {
  $('#LoadMe').load($(this).attr('href'));

  return false;
});

You might want to narrow the selector a down though.

- PeeHaa

Answer 3

有什么原因需要使用onclick吗？如果您可以将链接指向要从服务器获取的页面，那么jQuery的load方法正是您想要的。我知道的最简单的方法是：

<a href="loadThisPage1" class="pageFetcher">Load Page 1</a>
<a href="loadThisPage2" class="pageFetcher">Load Page 2</a>

<div id="LoadMe">Target div</div>
<script>
    $(function(){
        $('a.pageFetcher').click(function(){
            $('#LoadMe').load($(this).attr('href'));
        });
    });
</script>

使用onclick属性来处理事件已经过时了，而且与jQuery开发模式完全不符。

- Ben Hull

Answer 4

谢谢你的问题，进行了一些小修改。在div wiki_links内的链接将获取URL并在wiki_c中加载内容(作为每个链接的类的替代方案)：

$("#wiki_links").on('click', 'a', function() {
  $('#wiki_c').load($(this).attr('href'));
  return false;
});

- Louis Ferreira