Loading different content into a div

Question

I am a little new to js and jQuery so bear with me.

I want to load different content into a div depending on what is clicked. If link A is clicked then content A is loaded, if link B is clicked then content B is loaded..etc etc. I have managed to get content into the div but cant get more than the first to work.

 <p class="pageid" data-page="page_a">Click here for a<p> 
<p class="pageid" data-page="page_b">Click here for b<p> 

<div id="new_content" style="width:500px; margin-top:50px;"></div>

<script>
//set class pageid as a variable
var pageid = $('.pageid')
//get pageid's data page info
var page=pageid.attr("data-page")

//onclick load page
$('.pageid').click(function () {
      $("#new_content").load(page);
    });

</script>

Can someone point me in the right direction please. Thanks Phil

Answer 1

not sure try this:

$('.pageid').click(function () {
      $("#new_content").load($(this).attr("data-page"));
    });