Question

我正在使用jQuery将页面加载到DIV中，这样可以正常工作。在DIV中加载的页面上，我有一个链接，当点击此链接时，我想将该页面打开到与加载页面相同的DIV中。我不知道从哪里开始，我已经做了很多研究。有人可以帮忙吗？

我正在使用它将页面加载到DIV中。

 $(function(){
     $('#div').empty();
     $('.nav a').on('click', function(e){
         e.preventDefault();
         var page_url=$(this).prop('href');
         $('#content').load(page_url);
     });
 });

Answer 1

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load('somepageuri');
});

编辑：可能不希望该链接成为“真实”链接，但您可以将其设置为样式。尽管如此，上面的onclick事件仍然有效。只要知道如果你使用一个合法的链接，你需要用一些js或使用下面的href中和它：

<a href="javascript:"

或其他一些。

如果您使用合法链接并且只是用javascript中和正常的链接行为，您可以通过略微修改上面的第一个代码块来拉取链接中的href。

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load($(this).attr('href'));
});

Answer 2

您可以使用<iframe>，只需将其高度和宽度设为其包含div的100％。

HTML 1

<script>
$(function(){
    $('#div').empty();
    $('#content').html('<iframe src="embed.html" height="100%" width="100%" />');
});
</script>

<div id="div"></div>
<div id="content"></div>

HTML 2（嵌入页面）

<script>
$('.nav a').on('click', function(e){
    e.preventDefault();
    var page_url=$(this).prop('href');
    $('#test').load(page_url);
});
</script>

<div id="test" class="nav">
    <a href="http://www.wikipedia.com">Link</a>
</div>

在与链接相同的DIV中加载页面

2 个答案: