JQuery не удалось загрузить ДИВ

Question

У меня есть этот кусок кода, но я не в состоянии сделать эту работу я не могу загрузить ссылки

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

это решение работает для меня 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'); 
    }); 
}); 

Answer 2

Вы должны использовать $(this).closest('a') для поиска ближайшего Анчар после class="menu_top".

Documentation of .closest()

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

 
    var href = $(this).attr('href'); 
 
    $(this).closest('a').fadeOut().next('a').fadeIn('normal'); 
 

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

 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>