replacing one div with another div on a different html page

I have 2 html pages

Page 1 and 2 have structure somewhat like this

<div id="a">
  <div id="b">
  </div>
</div>

now what i want to do is on a click event I want the div b of 开发者_开发知识库page 1 replaced by div b of page 2

could anyone help me on how to achieve this

Well since you gave me nothing to work on I will make it up from scratch:

$('something').click(function(){
    $.post('page2.php',{}, function(data){
           $('#b').replaceWith($('#b', $(data)));
    })
})

You will need AJAX in order to get the contents of page 2. Then once you have it you can use replaceWith.

You are looking for the jQuery load function.

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

$('#a').load('page2.html #b');

This will replace everything in #a with #b from page2. If #a contains other elements you want preserved you will need to do something like:

$.get('page2.html', {}, function(data) {
    $('#b').replaceWith($('#b', $(data)));
}) 

Run that whenever you want to replace the #b element (ie. after a click or whenever).

1. On page 1, you bind the click event to a specific function
2. In your specific function you make an ajax call to the serveur
3. The serveur gives you the content of page 2 you are looking for
4. Still on page 1, you then add the content you received from the serveur to your page

An other possibility is the following. When accessing page 1, you include directly the content of page 2. But you hide the content (css).

1. You bind the click to a specific function
2. In this function, you simply get the text in your page 1, and show it