HTML内容加载上点击

Question

我有很多的div在页面上使用标签：

<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和IM不知道这是最好的办法

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