Загрузка содержимого HTML в DIV по щелчку

Question

У меня есть страница с большим количеством дивы на что вкладки использования:

<div class="tab-box"> 
    <a href="#companyinfo" class="tabLink activeLink">Company</a> 
    <a href="#contacts" class="tabLink">Contacts</a> 
</div> 

<div class="tabcontent" id="companyinfo"> 
content 1 
</div> 

<div class="tabcontent hide" id="contacts"> 
content 2 
</div> 

как я могу загрузить только каждый DIV, когда вкладка была нажата?

я думал об этом:

function LoadDivPage(pagename, divname) { 
    var page = pagename 
    $('#LoadingDiv').show(); 
    $(divname).load(page, function(){ 
     //new html exists now 
     $('#LoadingDiv').hide(); 
    }); 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
} 

<a href="#contacts" class="tabLink" onclick="LoadDivPage('http://www.google.co.uk/', '#contacts');">Contacts</a> 

, но его не загружая google.co.uk и им не уверен, что это лучший способ

Answer 1

Это работает, загружая контент только в том случае, если целевой div не является av ailable:

$(function(){ 
    var LoadDivPage = function(pagename, divname) { 
     var page = pagename, 
      containerClass = 'container-'+divname, 
      container = $('<div/>').addClass(containerClass); 

     if($('.'+containerClass).length > 0) return; 

     $('#LoadingDiv').show(); 

     $.get(page, function(data){ 
      container.html(data).appendTo($(divname)); 
      $('#LoadingDiv').hide(); 
     }); 
     $("html, body").animate({ scrollTop: 0 }, "slow"); 
    } 

    $('.tabLink').on('click', function(e){ 
     e.preventDefault(); 
     var page = $(this).data('page'), 
      div = $(this).attr('href'); 

     LoadDivPage(page, div); 
    }); 
}); 

http://jsfiddle.net/ag901f8m/2/

Answer 2

Что-то вроде этого:

$('.tabLink').on('click', function(e){ 
    e.preventDefault(); 
    $('.tabLink').addClass('activeLink').not(this).removeClass('activeLink'); 
    $('.tabcontent').addClass('hide'); 

    //Id of current tabcontent 
    var currentTab = $(this).attr('href'); 
    $(currentTab).removeClass('hide'); 
}); 

Example