jquery无法加载div

Question

I have this piece of code but i am unable to make this work i am unable to load the links

jquery.js

 $('.menu_top').click(function(){

        var href = $(this).attr('href');
        $('#content_area').fadeOut().load(href).fadeIn('normal');

        $('.menu_top').not(this).removeClass('active');
        $(this).addClass('active');

        return false;
    });

Index.php

  <a class="menu_top" href="#content_area">LINK 1</a> 
        <a id="content_area"style="display:none;">
         THIS IS LINK ONE 
       </a>
  <a class="menu_top" href="#content_area">LINK 2</a> 
        <a id="content_area"style="display:none;">
         THIS IS LINK TWO
       </a>

Answer 1

this solution worked for me Index.php

    <div  class="menu_top" data-target="#content_area1">Link 1</div> 
        <div  class="menu_top" data-target="#content_area2" >Link 2</div> 
        <div  class="menu_top" data-target="#content_area3" >Link3</div> 

<div id="content_area1" class="content_area" style="display:none;"> 
This is link 1
</div>
<div id="content_area1" class="content_area" style="display:none;"> 
This is link 2
</div>
<div id="content_area1" class="content_area" style="display:none;"> 
This is link 3
</div>

Jquery.js

$('.menu_top').click(function() {
var el=$(this)
$('.menu_top').removeClass('active')
$('.content_area').hide()
  $($(this).data('target')).show('slow', function() {

    $(el).addClass('active');
  });
});