Question

我的网站有两个页面都有相互之间的超链接，但当用户点击该超链接我只需要该页面的某个div被其他页面上的某个div替换，请指导我如何编程。

结构

page1.html

<div id="no_replace">
  <a href="page2.html">page 2</a>
  <div id="replace">
    //page one stuff
  </div>
</div>

page2.html

<div id="no_replace">
  <a href="page1.html">page 1</a>
  <div id="replace">
    //page two stuff
  </div>
</div>

所以第一页当usr点击链接“第二页”时......我希望第一页的'replace'div被page2.html的'replace'div替换，应该有淡入和淡出< / p>

Answer 1

使用load（）方法。

$('a').click(function(){
   $('div').load($(this).attr('href'));
});

Answer 2

首先给你的链接一个id或class。我打电话给它.loadpage

$('a.loadpage').click(function(e){
    e.preventDefault();
    var div = $('#replace');
    div.fadeOut(300).load($(this).attr('href'), function(){ div.fadeIn(300); });
});

首先，您需要通过执行e.preventDefault()来停止链接的默认行为。然后，您需要使用load()方法来引入您尝试加载的页面内容。

Answer 3

在Page1.html

中试试

$(function(){
  $("a").click(function(){
    $.get({url:"page2.html", 
           success: function(data){
           $("#replace").html($("#replace", $(data)).html());
     }
    });
  });
});

使用标签替换div

3 个答案: